Implement settings view screen for RRM

[nfmohit]

Feature Description

The module settings view screen should be added for the Reader Revenue Manager module. The screen should simply show the ID of the connected publication.

Screenshot for reference

• See relevant section in 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 view screen should be implemented for the Reader Revenue Manager module according to the Figma designs.
• The screen should display the ID of the connected publication (labelled as "Publication"), 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/SettingsView.js component added in Add JS entry point for RRM #8786, retrieve the publication ID with useSelect using getPublicationID selector.
• Return a div container with googlesitekit-setup-module class name which should wrap the following element with the mentioned structure as below.
  • A wrapper div with the class name googlesitekit-settings-module__meta-items and inside it another divwith class googlesitekit-settings-module__meta-item.
  • The setting label should be an h5 with the class name googlesitekit-settings-module__meta-item-type and the setting value should be a p with the class name googlesitekit-settings-module__meta-item-data, that renders a DisplaySetting component with the value as publication ID.
  • A reference of assets/js/modules/analytics-4/components/settings/SettingsView.js can be taken to build in similar way.
• Add the PublicationOnboardingStateNotice component to the main wrapper div.

Test coverage

• Add story for the component.

QA Brief

Changelog entry

[nfmohit]

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

• Return a div container with googlesitekit-setup-module class name which should wrap following element.

An additional class name specific to the module would be nice to add, i.e. googlesitekit-setup-module--reader-revenue-manager.

• A heading Publication and text which should be the publication ID. Note that the heading is smaller than the ID text. Please refer to the figma design. These both elements should be wrapped within a single div.

Using the appropriate class names and components in crucial here. Let's mention using the wrapper div to use the googlesitekit-settings-module__meta-item class, which should also have another wrapper div with the class googlesitekit-settings-module__meta-items.

The setting label should be an h5 with the class name googlesitekit-settings-module__meta-item-type and the setting value should be a p with the class name googlesitekit-settings-module__meta-item-data, that renders a DisplaySetting component with the publication ID.

It may also be beneficial to reference another module's SettingsView component to get an idea of the structure, e.g. assets/js/modules/analytics-4/components/settings/SettingsView.js. Using the appropriate markup is crucial to ensure a consistent structure.

---

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

[ankitrox]

Thank you @nfmohit . I've updated the IB as per mentioned points.

[nfmohit]

Thank you @ankitrox . I've made some minor linguistic improvements to the IB, it looks good to me 👍

IB ✅