Implement settings edit screen for RRM

[nfmohit]

Feature Description

The module settings edit screen should be added for the Reader Revenue Manager module. This should include a <PublicationSelect> component and <PublicationOnboardingStateNotice> component.

Screenshot for reference

• 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

• The module settings edit form should be implemented for the Reader Revenue Manager module according to the Figma designs.
• The form should include a dropdown to select a publication (via the <PublicationSelect> component being implemented by #8837), followed by a notice that conveys the publication onboarding state (via the <PublicationOnboardingStateNotice> component being implemented by #8838).

Implementation Brief

• In assets/js/modules/reader-revenue-manager/components/settings/SettingsEdit.js
  • Check if the settings changes are being submitted. Use isDoingSubmitChanges selector from the MODULES_READER_REVENUE_MANAGER store to check this.
  • Check if the current user has access to the module. This can be checked using hasModuleOwnershipOrAccess from CORE_MODULES store. Pass reader-revenue-manager as parameter to hasModuleOwnershipOrAccess. Take the reference of SettingsEdit component from analytics-4 module from here to check the access. Pass result of hasModuleOwnershipOrAccess to hasModuleAccess prop of PublicationSelect.
  • If changes are being submitted or hasModuleOwnershipOrAccess has not resolved yet, return the ProgressBar component.
  • If changes are not being submitted and hasModuleOwnershipOrAccess has resolved, return the div with class name googlesitekit-setup-module. It should wrap PublicationSelect and PublicationOnboardingStateNotice components as mentioned in AC.
• Add Storybook stories for the SettingsEdit component.

Test Coverage

• Add unit and visual reference tests for SettingsEdit component.

QA Brief

Note 1: Ensure that you have publications setup in publisher center. Refer QAB of this issue on how to setup publications. Also, there should be at least two publications setup for testing this.

Note 2: Ensure that "Custom Site URL" is NOT set in "Tester Settings" (Site Kit by Google Tester plugin).

1. Activate the module.

2. Run the following command in browser console. Remember to replace publicationID value with your publication ID in publisher center. It can be found in publisher center URL.

  const settings = {
      publicationID: "CAow6J6vDA",
      publicationOnboardingState: "ONBOARDING_ACTION_REQUIRED",
      publicationOnboardingStateLastSyncedAtMs: 0
    };

    googlesitekit.data.dispatch('modules/reader-revenue-manager').setSettings( settings );
    googlesitekit.data.dispatch('modules/reader-revenue-manager').saveSettings();

3. Refresh the page.

4. Go to Site Kit > Settings > Reader Revenue Manager, click on "Edit".

5. Initially there should be a progress bar which should be displayed until the publications have loaded. Once publications are loaded, there should be a dropdown for selecting publications, and a notice below it if the selected publication is in the "pending verification" or "action required" state (PENDING_VERIFICATION or ONBOARDING_ACTION_REQUIRED).

6. Change the publication from the dropdown and the CTA should change from "Save" to "Confirm changes".

7. Click on "Confirm changes". Refresh the page and make sure that settings have been saved correctly and publication stays selected.

Changelog entry

• Implement the settings edit view for the Reader Revenue Manager module.

[nfmohit]

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

• If changes are being submitted, return the ProgressBar component.

Besides when changes are being submitted, the ProgressBar should also be shown if hasModuleOwnershipOrAccess has not yet resolved, i.e. it returns undefined.

• If changes are not being submitted and the user has access, return the div with class name googlesitekit-setup-module. It should wrap PublicationSelect and PublicationOnboardingStateNotice components as mentioned in AC.

The settings form should also be shown even if the user doesn't have access. The "no access" scenario will be handled by the PublicationSelect component. For it to do that, pass the value of hasModuleOwnershipOrAccess to the hasModuleAccess prop of PublicationSelect.

---

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

[ankitrox]

Thanks @nfmohit for reviewing the IB.

I've updated IB as per suggestion. Over to you for re-review.

Thanks again!

[nfmohit]

Thank you for the iteration here, @ankitrox ! This looks good to me. Note: I have also included a point to add Storybook stories and VRT references for the SettingsEdit component.

IB ✅

[ankitrox]

This issue is ready to be move to CR, but needs to hold till #8837 and #8838 gets merged first.

[kelvinballoo]

QA Update ⚠️

I can't get the publications to appear at the dropdown.
Refer to the video attached.

8841.testing.mov

[kelvinballoo]

QA Update ✅

Finally, per the comment from @kuasha420 here: #8797 (comment) , it's now working.

I was able to verify this ticket and it's looking good

• Initially there is a progress bar until the publications have loaded.
• Once publications are loaded, a dropdown for selecting publications is there
• There is a notice as well below
• Changing the publication from the dropdown and the CTA changes from "Save" to "Confirm changes" accordingly
• Clicked on "Confirm changes" and refreshedthe page and the settings have been saved correctly and publication stays selected.

Moving ticket to approval.

RRM.works.mov