Feature Description

A dropdown (and associated informational elements) should be added to the Reader Revenue Manager setup and settings to aid the selection of a product ID.

• See relevant section in the design doc (setup and settings).
• See Figma designs (setup and settings).

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

Acceptance criteria

• A new dropdown field should be created in Site Kit that lists all available product IDs for the currently selected Reader Revenue Manager publication.
• The label of the field should be "Default Product ID".
• The field should have a static first option of "Open access", with value openaccess.
• Upon selection, it should set the selected product ID in the module settings.
• When setting up the Reader Revenue Manager module, in the case where the user has existing publications, if the selected publication has any available product IDs and the rrmModuleV2 feature flag is enabled, the dropdown should be added as a required field according to the Figma designs.
  • The first non-open-access product ID should automatically be selected during module setup.
• In the Reader Revenue Manager setup screen, in the scenario where the connected Google account has available publications to select from, if the rrmModuleV2 feature flag is enabled and the selected publication has available product IDs:
  • The dropdown should be added according to the Figma designs.
• In the Reader Revenue Manager settings edit screen, if the rrmModuleV2 feature flag is enabled and the selected publication has available product IDs or there is a saved product ID:
  • The dropdown should be added according to the Figma designs.
  • If the publication onboarding state notice is visible, the dropdown should appear below it, as depicted in this mock.
  • If the payment option of the selected publication is "subscriptions" and the currently selected product ID is "Open access", a dismissible warning notification should appear beside the dropdown with text "Selecting “Open access” will allow your reader to access your content without a subscription" according to this mock. The dismiss action label should be "Got it". The dismissal should be persistent.
  • The dropdown should have a helper text: "Product IDs offer a way to link content to payment plans. Learn more". "Learn more" should be a link that opens this URL in a new tab.
  • The dropdown should be followed by a dismissible informational subtle notification with text "Use the new settings in the block editor to select different product IDs for individual pages or control where CTAs appear on an individual post. Learn more" according to the Figma designs.
    • "Learn more" should be a link that opens the rrm-content-settings support redirector in a new tab. Note that it hasn't been added to the Support Redirects sheet yet, and the link, for now, will direct to a 404 page.
    • The dismiss action should be labelled as "Got it", and it should dismiss the notification permanently.

Implementation Brief

Create a ProductIDSelect Component

• In assets/js/modules/reader-revenue-manager/components/common, create a new ProductIDSelect component with the following:
  • Fetch the list of product IDs using the getProductIDs() selector of the Reader Revenue Manager store.
  • Render the ProgressBar component if product IDs are still resolving.
  • Map through the available product IDs and include "Open access" (openaccess) as the first static option in the dropdown.
  • Populate the rest of the dropdown options with the available custom product IDs.
  • Create a callback function that dispatches the selected value to the module settings using the setProductID action.
  • Render the Select, Option components with the necessary props.
  • Pass the callback function to the onEnhancedChange prop of the Select component.
• The styles should match the Figma design.

Integrate ProductIDSelect into the RRM Setup Flow

• In assets/js/modules/reader-revenue-manager/components/setup/SetupForm.js:
  • Conditionally render the ProductIDSelect component next to the publication dropdown if:
    • The rrmModuleV2 feature flag is enabled.
    • The user has chosen a publication that has product IDs available.
  • Auto-selection:
    • On page load (i.e. on mount), check if the user has already selected a product ID (productID is empty or openaccess) and there is at least one custom product ID using the getProductIDs selector.
    • Dispatch the setProductID( firstCustomProductID ) to select the first non-openaccess product ID by default using the useEffect hook.
    • Note: This auto-selection should only happen in the setup flow.
• The styles should match the Figma design.

Integrate ProductIDSelect to the RRM Settings Edit Screen

• In assets/js/modules/reader-revenue-manager/components/settings/SettingsEdit.js:
  • Conditionally render the ProductIDSelect component below the publication dropdown if:
    • The rrmModuleV2 feature flag is enabled.
    • The user has chosen a publication that has product IDs available.
    • Warning Notification:
      • Check if the paymentOption is subscriptions using the getPaymentOption selector and the user selects “Open access,”, render the SubleNotification component with the following:
        • variant: warning
        • description: Selecting “Open access” will allow your reader to access your content without a subscription
        • dismissLabel: Got it
        • onDismiss: pass a callback function that dispatches the dismissItem action to dismiss the notification permanently.
        • This should should appear next to the dropdown and should match the Figma design.
    • Informational Notice:
      • Render the SubleNotification component with the following:
        • variant: info
        • description: Use the new settings in the block editor to select different product IDs for individual pages or control where CTAs appear on an individual post. You can also configure a different product ID for a group of posts in the Categories or Tags section. Learn more
        • dismissLabel: Got it
        • onDismiss: pass a callback function that dispatches the dismissItem action to dismiss the notification permanently.
        • This should appear below the dropdown and should match the Figma design.
        • The links should open in a new tab with the URLs provided in the AC.
• The styles should match the Figma design.

Modify SubtleNotification Component

• In assets/js/components/notifications/SubtleNotification.js:
  • Update the VARIANTS constants to add a new property INFO with the value info.
  • Locate the googlesitekit-subtle-notification parent element and add a conditional class googlesitekit-subtle-notification--info if the variant is info.
  • Locate the googlesitekit-subtle-notification__icon element and render the info-circle.svg icon if the variant is info.
• Add the necessary styles for the new info variant in assets/sass/components/dashboard/_googlesitekit-subtle-notification.scss.

Test Coverage

• Add a Storybook story for the ProductIDSelect component.
• Add storybook stories for the SetupForm and SettingsEdit components to showcase the ProductIDSelect in various states.
• Add test cases for the ProductIDSelect component.
• Add test cases for the SetupForm and SettingsEdit components.

QA Brief

• Setup Reader Revenue Manager with the rrmModuleV2 feature flag enabled.
• Setup a paywall for a publication that has custom product IDs available.
• Ensure the ProductIDSelect dropdown is displayed in the setup flow as per the ACs.
• Ensure the first non-Open access product ID is auto-selected during setup if the user hasn't selected a product ID yet.
• Ensure the ProductIDSelect dropdown is displayed in the settings edit screen as per the ACs.
• Ensure the warning notification is displayed if the user selects "Open access" and the payment option is "subscriptions". Please verify this with the updated Figma design.
• Ensure the informational notification is displayed below the dropdown in the settings edit screen.
• Verify that the links in the informational notification navigate to the correct pages.
• Please note that there may be some differences in styling between the implementation and the Figma designs, especially in regard to the spacing between different elements. This is intentional to be consistent with the settings edit screens of other modules.

Changelog entry

• Add a dropdown and associated informational elements to the Reader Revenue Manager setup and settings screens, to aid the selection of a product ID.