Implement `<PublicationApprovedOverlayNotification>` component

[nfmohit]

Feature Description

A <PublicationApprovedOverlayNotification> component should be implemented for the Reader Revenue Manager module that renders an <OverlayNotification> component in the Site Kit dashboard.

Screenshot for reference


• Its trigger will be implemented by #8796.
• See the relevant section in the design doc.
• See Figma designs.

---

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

Acceptance criteria

• A <PublicationApprovedOverlayNotification> component should be added for the Reader Revenue Manager module according to the Figma designs that renders an overlay notification that lets the user know that their publication was approved.
• Its heading should be "Your Reader Revenue Manager publication is approved".
• Its description should be "Unlock your full reader opportunity by enabling features like subscriptions, contributions and newsletter sign ups".
• Its dismissal, "Maybe later", should dismiss the notification persistently.
• Its CTA, "Enable features" (with an external link icon), should open the publication in Reader Revenue Manager in a new browser tab.
• It should be rendered in the Site Kit dashboard only if the rrmModule feature flag is enabled AND a key in the core/ui store is set to true, e.g. show-rrm-publication-approved-notification (with constant UI_KEY_SHOW_RRM_PUBLICATION_APPROVED_NOTIFICATION).
• It should adhere to the mobile designs in Figma here.

Implementation Brief

• [x] Add a constant UI_KEY_SHOW_RRM_PUBLICATION_APPROVED_NOTIFICATION to assets/js/modules/reader-revenue-manager/datastore/constants.js with value 'show-rrm-publication-approved-notification'.
• [x] Create assets/js/module/reader-revenue-manager/components/PublicationApprovedOverlayNotification.js
  • [x] Add and export constant RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION with value rrmPublicationApprovedOverlayNotification. This will be passed as notificationID to OverlayNotification component.
  • [x] In the component, create the shouldShowNotification according to following points. This prop will be passed to OverlayNotification. Note that this should fulfill all of the following conditions to be true.
  • [x] Not dismissed already. Use RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION to check this.
  • [x] User is non-view-only user (use useViewOnly hook).
  • [x] Dashboard is the main dashboard (use useDashboardType hook).
  • [x] UI_KEY_SHOW_RRM_PUBLICATION_APPROVED_NOTIFICATION key from CORE_UI store is set to true. This will be set to true by syncPublicationOnboardingState action (refer #8796).
  • [x] Pass the different graphics for GraphicDesktop and GraphicMobile according to the figma designs.
  • [x] Also note that button positions are different for desktop and mobile. We can use useBreakpoint hook do position the CTAs.
  • [x] The heading and description should be copied from the AC.
  • [x] Create a function dismissNotification in component
  • [x] Clicking on Maybe later should called dismissOverlayNotification from CORE_UI store. Pass RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION to dismissOverlayNotification.
  • [x] Enable features CTA should use Button component with href prop passed to it. The link should be be passed using getServiceURL selector (#8848), pass publication ID to the selector.
  • [x] Both the CTAs should be in disabled state when the notice is being dismissed. It can be checked using isDismissingItem selector from CORE_USER store.
• [x] In assets/js/components/OverlayNotification/OverlayNotificationsRenderer.js, render rrmPublicationApprovedOverlayNotification if RRM feature is enabled (refer useFeature hook).

Test Coverage

• Add tests for PublicationApprovedOverlayNotification, also test dismissal behaviour.
• Add story for PublicationApprovedOverlayNotification component.

QA Brief

1. Make sure module is enabled in tester plugin.

2. Activate the module and go to Site Kit > Dashboard. Do not do any configuration as of now.

3. Run the following command in browser console.

googlesitekit.data.dispatch( 'core/ui' ).setValue( 'READER_REVENUE_MANAGER_SHOW_PUBLICATION_APPROVED_NOTIFICATION', true );

4. As soon as above command is run, it should display the overlay notification.

5. "Enable Features" should take to the publisher centre.

https://publishercenter.google.com/?utm_source=sitekit

6. Clicking on "Maybe later" should dismiss the notification. Refreshing the page should not show the notification again.

Changelog entry

[nfmohit]

Thank you for the IB, @ankitrox ! Please take a look at my comments below:

• Add RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION to assets/js/module/reader-revenue-manager/ with value rrmPublicationApprovedOverlayNotification.

We'd want to add this constant to the same component file and export it as well. For reference, see LINK_ANALYTICS_ADSENSE_OVERLAY_NOTIFICATION in assets/js/components/OverlayNotification/LinkAnalyticsAndAdSenseAccountsOverlayNotification.js.

• In the component check if the component is dismissed, if it is dismissed, pass shouldShowNotification prop to OverlayNotification accordingly.

We should further expand on the conditions for the shouldShowNotification prop. Please add the following criteria:

1. It should only show up if it is not already dismissed (this condition already exists in the current IB).
2. It should only show up for a non-view-only user (see useViewOnly hook). This requirement wasn't added in the ACs and I just added it, sorry!
3. It should only show up in the main dashboard (see useDashboardType hook). This requirement wasn't added in the ACs and I just added it, sorry!
4. It should only show up if the core/ui store key mentioned in the AC is set to true. We also need to add that key as a constant somewhere like assets/js/modules/reader-revenue-manager/datastore/constants.js.

Finally, we want to render this component in assets/js/components/OverlayNotification/OverlayNotificationsRenderer.js, but only if the rrmModule feature flag is enabled.

• Pass the different graphics for GraphicDesktop and GraphicMobile according to the figma designs.

The link to the Figma designs here points to a different mock. It is sufficient to mention that the Figma designs from the ACs should be referenced.

• Enable features CTA should use Button component with href prop passed to it. The link should be https://publishercenter.google.com/reader-revenue-manager?publication={$publicationID} where the $publicationID is the approved publication ID.

Similar to other issues, the link should use the getServiceURL selector with the publication ID passed to it.

---

Please let me know if you have any questions, thanks!

[ankitrox]

Thanks for the IB review @nfmohit . I've made the suggested changes in IB.

Assigning back to you for review.

[nfmohit]

Thank you for updating the IB, @ankitrox ! I've left a few follow-up comments:

• Add and export constant RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION to assets/js/modules/reader-revenue-manager/datastore/constants.js with value rrmPublicationApprovedOverlayNotification.

Similar to other overlay notification components, I think this should reside in the component file itself, i.e. assets/js/module/reader-revenue-manager/components/PublicationApprovedOverlayNotification.js.

• Rendering the banner/popup is handled here. It will be visible when the RRM feature is enabled.

I think this statement is no longer necessary as we're handling the rendering of the component in this issue.

• RRM_PUBLICATION_APPROVED_OVERLAY_NOTIFICATION key from CORE_UI store is set to true.

This constant doesn't currently exist, so it should be added to assets/js/modules/reader-revenue-manager/datastore/constants.js as mentioned in the ACs.

---

Please let me know what you think, thank you!

[ankitrox]

Sorry @nfmohit , I was initially bit confused with both constants, but I've made it clear in IB now that one is for notification ID and other is for UI store.

Updated the IB according to suggestions.

Thank you.

[nfmohit]

Looks fantastic now, thank you @ankitrox ! IB LGTM 👍 ✅

[ankitrox]

Hi @kuasha420 ,

If you haven't started with this one, just a heads up that UI_KEY_SHOW_RRM_PUBLICATION_APPROVED_NOTIFICATION constant has been added in #8796 here

Thanks