Scaffold RRM module setup flow

[nfmohit]

Feature Description

The Reader Revenue Manager module setup flow has different states based on the number of publications the user has. This issue should handle setting the module setup screen and placeholder components for each state.

• See relevant section in the design doc.
• This is similar to #5455 from the Thank with Google epic.

---

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

Acceptance criteria

• The setup component for Reader Revenue Manager should be created according to the Figma designs.
• If there are no publications for the user, the user should be offered to create a new publication (via the <PublicationCreate> component being added as part of #8836).
  • This change in the view component should be permanent, i.e. once the user is shown the <PublicationCreate> component, they shouldn't be shown the content below even though Site Kit detects that publications exist later. This is crucial to ensure that the two steps in the <PublicationCreate> component that appear based on the availability of publications function correctly. This can be done by using a new form key in the core/forms data store.
• Otherwise, the following should be shown in order:
  • Paragraph text: If there is only one publication, it should be "Site Kit will connect your existing publication". If there is more than one publication, it should be "Select your preferred publication to connect with Site Kit".
  • A dropdown to select a publication (via the <PublicationSelect> component being added as part of #8837).
    • A publication should be auto selected (using the findMatchedPublication() action being added as part of #8795).
  • A notice to show the publication onboarding state (via the <PublicationOnboardingStateNotice> component being added as part of #8838).
  • A "Create new publication" external link. This should open the publisher center in a new browser tab.
  • A "Complete setup" button. It should save the module settings and complete the module setup.

Implementation Brief

• Add constant READER_REVENUE_MANAGER_SETUP_FORM with value readerRevenueManagerSetupFormData in assets/js/modules/reader-revenue-manager/datastore/constants.js.
• Add constant SHOW_PUBLICATION_CREATE_FORM with value showPublicationCreateForm in assets/js/modules/reader-revenue-manager/datastore/constants.js.
• In assets/js/modules/reader-revenue-manager/components/setup/SetupMain.js
  • This component will receive the finishSetup prop which is a function.
  • Get the publications using useSelect hook and getPublications selector from RRM store.
  • If the getPublications selector is not resolved yet, display the ProgressBar component.
  • If there are no publications available, set the form value using setValues function from core/forms store. Pass form name as READER_REVENUE_MANAGER_SETUP_FORM and value as an object as following

    dispatch( CORE_FORMS ).setValues( READER_REVENUE_MANAGER_SETUP_FORM, {
          [ SHOW_PUBLICATION_CREATE_FORM ]: ! publications, // `publications` is the result of `getPublications` selector.
    } )

  • Create a let variable viewComponent which will hold the component that needs to be displayed.
  • Assign PublicationCreate component to viewComponent if value of SHOW_PUBLICATION_CREATE_FORM is true. "Create Publication" CTA would be displayed as part of Implement <PublicationCreate> component #8836, the onCompleteSetup for the CTA should be passed which should dispatch the submitChanges action and call the finishSetup function.
  • Implement automatic refresh for RRM module setup flow #8839 will take care of automatic refresh for module setup flow. When user navigates away from current tab and if they create the publication, an API call will be triggered to fetch the publications. If publication found, PublicationCreate component will render the next step as mentioned below.
  • If there are publications available and form value is not set, in that case we need to display PublicationSelect component. Wrap the text and dropdown component in a div with class name googlesitekit-settings-module__fields-group. Refer this component from ads module for similar structure, just replace TextField with PublicationSelect component.
    • If there is only one publication, text above the dropdown should be "Site Kit will connect your existing publication" else it should be "Select your preferred publication to connect with Site Kit".
    • Render the "Create new publication" CTA below the PublicationSelect component. Use getServiceURL selector added in Implement RRM getServiceURL() selector #8848 to get the link to publication center which will get opened in a new tab.
    • Make use findMatchedPublication action to find the suitable publication in case there is no publication ID available already and multiple publications are available. If the publication is returned by the action, set publication ID, onboarding state and sync timestamp using setPublicationID and setPublicationOnboardingState actions respectively, so that PublicationSelect component can retrieve it and display it as selected one.
    • Clicking on the Complete setup should dispatch submitChanges on RRM module store and call the finishSetup function.

Test Coverage

1. Add tests no publication, one publication and multiple publication.
2. Add tests for scenario by setting the form value.
3. Add stories for component for all the scenarios.

QA Brief

• Using the tester plugin, turn on the rrmModule feature flag.

No publications in account scenario

• Set up Site Kit with a Google account that doesn't have any publications in Publisher Center.
• Go to Site Kit Settings -> Connect More Services.
• Click on "Set up Reader Revenue Manager".
• Verify that you see the publication creation flow.
• Click on the "Create new publication" CTA. The Publisher Center should be opened in a new tab.
• Return to the RRM setup browser tab after 15 seconds and verify that the second step of the publication creation flow is shown.
• Click on the "Complete setup" CTA and verify that the RRM module is connected.

Available publications in account scenario

• Set up Site Kit with a Google account that has publications in Publisher Center.
• Go to Site Kit Settings -> Connect More Services.
• Click on "Set up Reader Revenue Manager".
• Verify that the publication select shows up with the text "Site Kit will connect your existing publication" if the account has one publication, or "Select your preferred publication to connect with Site Kit" for more publications.
• Verify that a publication is pre-selected automatically.
  • Click on the "Complete setup" CTA and verify that the RRM module is connected.
  • OR, click on the "Create new publication" link should open the Publisher Center in a new tab. Returning to the RRM setup browser tab after 15 seconds should re-load the setup screen with a progress bar and update the publication select with the newly created publication.

Note: You may notice some differences in styles compared to the Figma designs, specifically regarding the introductory "Site Kit will connect your existing publication" text and spacing between elements. This is expected to ensure consistency with other modules' setup flows. See discussion here.

Changelog entry

• Introduce Reader Revenue Manager setup flow.

[nfmohit]

Note: Added a new point in the ACs:

• This change in the view component should be permanent, i.e. once the user is shown the <PublicationCreate> component, they shouldn't be shown the content below even though Site Kit detects that publications exist later. This is crucial to ensure that the two steps in the <PublicationCreate> component that appear based on the availability of publications function correctly. This can be done by using a new form key in the core/forms data store.

Back to IB again.

[nfmohit]

Excellent IB, thanks @ankitrox ! Please take a look at my comments below:

---

• Add constant READER_REVENUE_MANAGER_FORM with value readerRevenueManagerFormData in assets/js/modules/reader-revenue-manager/datastore/constants.js.

1. Let's propose this constant to be READER_REVENUE_MANAGER_SETUP_FORM.
2. Let's add this as a top-level item.

• If there are no publications available, set the form value using setValues function from core/forms store. Pass form name as READER_REVENUE_MANAGER_FORM and value as an object as following

  {
    publicationCreateRendered: true
  }

Let's change the object key to be something more meaningful, such as showPublicationCreateForm which is added as the value for a new constant SHOW_PUBLICATION_CREATE_FORM in assets/js/modules/reader-revenue-manager/datastore/constants.js.

• If there are no publications available assign PublicationCreate component to viewComponent.

Instead of using the number of publications to show PublicationCreate, let's simplify this and only rely on the CORE_FORM datastore value, i.e. "Assign PublicationCreate component to viewComponent if SHOW_PUBLICATION_CREATE_FORM value is true".

• Display the "Create Publication" CTA should use Button component with href prop passed to it. The link should be be passed using getServiceURL selector

The "Create publication" CTA inside PublicationCreate will be added as part of #8836, we do not need to include it here.

However, the PublicationCreate component will need an onCompleteSetup prop (see the IB for #8836), which is a callback that should dispatch the submitChanges action and call the finishSetup function.

If there are publications available, but value of publicationCreateRendered is true in CORE_FORMS store for READER_REVENUE_MANAGER_FORM form name, assign PublicationCreate component to viewComponent. This will be useful to display the second step of PublicationCreate component.

• Clicking on the Complete setup should call the saveSettings on RRM module store and call the finishSetup function.

This bit is not necessary, as mentioned above, we should always render PublicationCreate when SHOW_PUBLICATION_CREATE_FORM value is true.

• Make use findMatchedPublication action to find the suitable publication in case there is no publication ID available already and multiple publications are available. If the publication is returned by the action, set it using setPublicationID action so that PublicationSelect component can retrieve it and display it as selected one.

Let's also set the publicationOnboardingState and publicationOnboardingStateLastSyncedAtMs module settings similar to PublicationSelect.

• Clicking on the Complete setup should call the saveSettings on RRM module store and call the finishSetup function.

In order to save settings in the setup/settings screens, we should ideally use the submitChanges action, which checks if any changes have been actually made first.

---

Please let me know if you have any questions on the above, thank you!

[ankitrox]

Thanks for reviewing the IB @nfmohit and your valuable feedback.

I've made the changes as per the suggestions. Over to you for re-review.

Thanks again!

[nfmohit]

Thank you for the iteration here, @ankitrox ! This looks good to me. Note: I've removed the requirement to set publicationOnboardingStateLastSyncedAtMs as it will be set anyway almost immediately as part of maybeSyncPublicationOnboardingState action.

IB ✅

[kelvinballoo]

QA Update ⚠️

Tested this and I have an observation which is failed and one clarification:

ITEM 1:
I was testing the scenario where we already have 1 publication selection and I create another one through the module. More specifically the second point on the QAB here:

Verify that a publication is pre-selected automatically.
- Click on the "Complete setup" CTA and verify that the RRM module is connected.
- OR, click on the "Create new publication" link should open the Publisher Center in a new tab. Returning to the RRM setup browser tab after 15 seconds should re-load the setup screen with a progress bar and update the publication select with the newly created publication.

After creation of the publication (more than 15 seconds), the screen did not reload with a progress bar to update the newly created publication ❌

Video is attached for reference, at around 1m30-1m45 roughly:

create.2nd.publication.-.error.1080p.mov

ITEM 2:
Whenever there are 2 existing publications and I set up the RRM. Which of the 2 publications should be pre-selected? ⚠️

---

Other than that, the scenario with 0 publications was tested good.

Scenario.with.no.publication.mov

After completing setup, the module was connected as well:

[nfmohit]

Thank you for sharing your observations, @kelvinballoo !

---

Regarding Item 1, it looks like the QAB and implementation do not match. @kuasha420 I'd like to have your opinion here. We only refresh the publications in the case where there isn't any publication already selected (see ACs for #8839). In this scenario, since a publication is already selected, the publications are not refreshed. Do you think we should also refresh in this case?

---

@kelvinballoo Regarding Item 2, the publication will be selected based on the condition here, i.e. if you have two publications, it will select the publication that has onboarding completed. If none of the publications have completed onboarding, it will just select the first available publication.

[kuasha420]

Hi @nfmohit, since there's a CTA to create new publication, I think we SHOULD refresh the list even if there are existing publication on tab refocus similar to how it's done for no publication scenario, otherwise it is bit of a UX miss. Thank you.

[nfmohit]

Agreed, thank you @kuasha420.

@kelvinballoo I'm sending this back to Execution to address Item 1. Thanks!

[aaemnnosttv]

Back to you @kelvinballoo for another pass 👍

[kelvinballoo]

QA Update ⚠️

Hi @nfmohit ,
Thanks! I'm getting the progress bar now and it's pulling the newly created publication.

2 clarification points:

• After i created the publication and went back to SK. It's worth noting that the reload will not happen until I click on the screen. I assume that is the expected behaviour. Can you confirm?

• Currently, after the dropdown reloads, it will pull the latest publication but it won't select it. Based on the QAB below, are we saying the the latest publication should also be selected then? That's a bit ambiguous for now.
  A video is also attached for reference. (Test 3 was my latest publication created)
  

  New.publication.is.not.pre-selected.mov
  QAB extract:

 Verify that a publication is pre-selected automatically.
  - Click on the "Complete setup" CTA and verify that the RRM module is connected.
  - OR, click on the "Create new publication" link should open the Publisher Center in a new tab. Returning to the RRM setup browser tab after 15 seconds should re-load the setup screen with a progress bar and update the publication select with the newly created publication.

[nfmohit]

Thank you for sharing your observations, @kelvinballoo!

• After i created the publication and went back to SK. It's worth noting that the reload will not happen until I click on the screen. I assume that is the expected behaviour. Can you confirm?

Please take a look at my screencast below:

1.mp4

As you can see in my screencast, I did not need to click on the page for the reload to start. As soon as I went back to the RRM setup tab, the reload started. Could you try again?

• Currently, after the dropdown reloads, it will pull the latest publication but it won't select it. Based on the QAB below, are we saying the the latest publication should also be selected then? That's a bit ambiguous for now.
  A video is also attached for reference. (Test 3 was my latest publication created)

Apologies for the confusion here. It is not mandatory that the latest publication will be selected. The publication auto-select will still happen based on the condition here, i.e. if you have more than one publication, it will select the publication that has onboarding completed. If none of the publications have completed onboarding, it will just select the first available publication in the list.

---

Please let me know if you have any other questions, thank you!

[kelvinballoo]

QA Update ⚠️

Thanks for sharing that screencast @nfmohit .

I did another round of testing and here are some observations:

• When I click on 'Create new publication' and move away for 15 seconds or create a publication, the reloading will auto happen.
• However, if I don't click on 'Create new publication' and move away for 15 seconds and come back, reloading will not be happening. This behaviour is conflicting with Implement automatic refresh for RRM module setup flow #8839 .
  That could be treated as a separate issue IMO.

I've attached a video for reference as well.

Difference.between.clicking.create.new.pub.or.not.mov

[nfmohit]

Hi @kelvinballoo .

This is expected for the setup form. The behaviour that you linked to is only valid for the "no publications available" scenario, however, that has been changed as well. From now on, the automatic refresh will only happen if the user clicks on "Create new publication", goes to a different tab, and returns to the setup tab after 15 seconds.

[kelvinballoo]

QA Update ✅

Thanks @nfmohit

This is thus verified good:
No publications in account scenario ✅

• When setting up one without publications, the publication creation flow was there.

• Clicking on the "Create new publication" CTA opens The Publisher Center in a new tab.

• Upon returning to the RRM setup browser tab after 15 seconds, the second step of the publication creation flow is shown.

• After clicking on "Complete setup" CTA and the RRM module was verified and connected

  Successful.setup.without.publication.mov

  Module connected:
  

Available publications in account scenario ✅

• Tested whenever there is 1 publication and one with more than 1 publications.

• The correct screen appeared for the 1 publication: Site Kit will connect your existing publication

  

• The correct screen appeared for more than 1 publication: Select your preferred publication to connect to Site Kit

  

• Publication is pre-selected automatically in both cases.

• When clicking on the "Create new publication" link, it opens the Publisher Center in a new tab. Returning to the RRM setup browser tab after 15 seconds re-loads the setup screen with a progress bar and update the publication dropdown with the newly created publication.

• Completing setup will help to save and the module is connected properly.

  Refer to first 35 seconds:

  Difference.between.clicking.create.new.pub.or.not.mov

Moving ticket to Approval