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 #8836, the onCompleteSetup for the CTA should be passed which should dispatch the submitChanges action and call the finishSetup function.
  • [ ] #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 #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

Changelog entry

[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 ✅