Add RRM product ID notifications

[nfmohit]

Feature Description

With the addition of support for product IDs in Reader Revenue Manager as part of Phase 2, the Site Kit dashboard should show a notification recommending users to set a default product ID in Site Kit if it is available and not already set.

1. When the publication uses subscriptions:
   
2. When the publication uses contributions:
   

• See 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

• Trigger Conditions (Common)
  • The subscription notification or the contribution notification should only appear in the Site Kit dashboard if the following conditions are met:
    • The publication is approved.
    • The publication uses a monetary CTA (paymentOption is subscriptions or contributions).
    • The publication has custom product IDs available (productIDs is not empty).
    • No default product ID is configured.
• Subscription Notification
  • Only appears if paymentOption is subscriptions.
  • Description: "To complete your Reader Revenue Manager paywall setup, add your product IDs in settings"
  • Primary CTA: "Edit settings" - should navigate to the Reader Revenue Manager module settings page.
  • Secondary CTA: "Got it" - should dismiss the notification.
  • The style and copy should match the Figma design.
• Contribution Notification
  • Only appears if paymentOption is contributions.
  • Description: "New! You can now select product IDs to use with your Reader Revenue Manager snippet"
  • Primary CTA: "Edit settings" - should navigate to the Reader Revenue Manager module settings page.
  • Secondary CTA: "Got it" - should dismiss the notification.
  • The style and copy should match the Figma design.
• Feature Flag
  • These notifications are only visible when the rrmModuleV2 feature flag is enabled.

Implementation Brief

Create ProductIDNotification component

In assets/js/modules/reader-revenue-manager/components/dashboard:

• Create a new component ProductIDNotification with the following:
  • Retrieve the publication onboarding state from the getPublicationOnboardingState selector.
  • Retrieve the paymentOption from the getPaymentOption selector.
  • Retrieve the productIDs from the getProductIDs selector.
  • Retrieve the productID from the getProductID selector.
  • If the publication onboarding state is complete and the productID is not set:
    • Construct the notification content based on the paymentOption as described in the AC.
    • Define a separate id for each variant.
    • Render the Notification component and the SubtleNotification component as the child component.
    • Create a new class for the contributions variant and pass it to the SubtleNotification component based on the condition.
    • The primary CTA should navigate to the Reader Revenue Manager module settings page using the getAdminURL selector and navigateTo action.
    • The secondary CTA should dismiss the notification using the dismissItem action.
    • Pass the title and description as props to the SubtleNotification component.
    • For example, take a look at the RRMSetupSuccessSubtleNotification
  • The styles should match the Figma designs.

Register ProductIDNotification component

In assets/js/modules/reader-revenue-manager/index.js:

• Register the ProductIDNotification component within the NOTIFICATIONS object with the following:
  • key: product-id-notification-rrm
  • component: ProductIDNotification
  • priority: more than the RRMSetupSuccessSubtleNotification component.
  • Pass a callback function to the checkRequirements property that returns true if the notification should be displayed:
    • The rrmModuleV2 feature flag is enabled.
    • RRM module is connected.
    • The publication is approved.
    • If the paymentOption is subscriptions or contributions.
    • If the productIDs is not empty.
    • The RRMSetupSuccessSubtleNotification component should be dismissed.
    • Either one of the notification variants is not dismissed.
    • Otherwise, return false.

Test Coverage

• Add storybook stories for the ProductIDNotification component.
• Add VRT scenarios to cover the new notification.
• Add unit tests to cover the new notification component.

QA Brief

• Set up Site Kit with the rrmModule and rrmModuleV2 feature flags enabled.
• Connect the RRM module using an approved publication with a contribution request CTA set up which has one or more product IDs attached to it.
• Navigate to the dashboard and verify that the contributions notification variant appears as per the AC.
• Connect the RRM module using an approved publication with a paywall CTA set up which has one or more product IDs attached to it.
• Navigate to the dashboard and verify that the subscriptions notification variant appears as per the AC.

Changelog entry

• Add Reader Revenue Manager product ID notifications.

[techanvil]

AC ✅

[nfmohit]

Thank you for drafting the IB, @hussain-t!

• Return null if the paymentOption is not subscriptions or contributions.
• Return null if the productIDs is empty.

As far as I can recall, components using the new notifications infrastructure should not return null. Why don't we make these checks in checkRequirements? I feel if checkRequirements passes but the component returns null, it will block other following notifications in the upstream.

Let me know what you think, thank you!

[hussain-t]

Thanks, @nfmohit! That sounds good. I've updated the IB.

[nfmohit]

Looks great now, thank you @hussain-t! IB ✅

[wpdarren]

QA Update: ✅

Verified:

• Connected the RRM module using an approved publication with a contribution request CTA set up with at least one product ID attached to it. When on the dashboard the contributions notification variant appears as per the AC.
• Connected the RRM module using an approved publication with a paywall CTA set up with at least one product ID attached to it. When on the dashboard the subscriptions notification variant appears as per the AC.

Tested to ensure that the notifications only appeared when the trigger conditions are met and the v2 RRM feature flag is enabled. Also, tested In other scenarios, i.e. when no product ID is attached to the subscription and contribution then the notifications does not appear. The notifications were dismissed when the Got it link was clicked.

Note: I clicked on the Edit settings CTA button but at this stage, I am unable to edit the product ID, this will be tested more when 10065 is merged.