Implement `<PublicationOnboardingStateNotice>` component

[nfmohit]

Feature Description

A <PublicationOnboardingStateNotice> component should be implemented for the Reader Revenue Manager module that renders a notice based on the onboarding state of the current 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

• A <PublicationOnboardingStateNotice> component should be added to the Reader Revenue Manager module according to the Figma designs that renders a notice based on the onboarding state of the current publication.
• If the current/selected publication is awaiting review or needs additional steps, that should be conveyed to the user via this notice, otherwise, it should output nothing.
• If the publication is awaiting review:
  • This can be determined if the onboarding state of the publication is PENDING_VERIFICATION.
  • Text: "Your publication is still awaiting review. you can check its status in Reader Revenue Manager."
  • CTA: "Check publication status" (with external link icon). This should open the publication in the publisher center in a new browser tab.
• If the publication needs additional steps:
  • This can be determined if the onboarding state of the publication is ONBOARDING_ACTION_REQUIRED.
  • Text: "Your publication requires further setup in Reader Revenue Manager"
  • CTA: "Complete publication setup" (with external link icon). This should open the publication in the publisher center in a new browser tab.

Implementation Brief

Note: PropertySelect component in #8837 will be responsinble for setting the onboarding state in the settings using the setPublicationOnboardingState action. This has already described in IB for #8837.

• [ ] Create a new component in assets/js/module/reader-revenue-manager/components/common/PublicationOnboardingStateNotice.
  • [ ] Component should make use of useSelect hook to check for the publicationOnboardingState and call getPublicationOnboardingState selector.
  • [ ] If the value of the onboarding is not PENDING_VERIFICATION or ONBOARDING_ACTION_REQUIRED, return null.
  • [ ] If the onboatding state is within one of PENDING_VERIFICATION or ONBOARDING_ACTION_REQUIRED, display the notice text and CTA text as per AC mentioned above.
  • [ ] Use the SettingsNotice component to display the notice. Pass following props to it.
  • [ ] Icon - Pass warning as we need to display the warning notice.
  • [ ] notice - This will be the notice text as per AC.
  • [ ] OuterCTA - This should be CTA which will open the publication center (https://publishercenter.google.com/) in a new tab. Use Link component to display CTA link with external prop set to true. We should use getServiceURL selector to get the URL for the CTA. Pass publication ID to the selector.
• [ ] Refer the figma design for PublicationOnboardingStateNotice component to match the notice component with the design.

Test Coverage

Add tests for component with different onboarding states.

QA Brief

Changelog entry

[nfmohit]

Thank you for the excellent IB here, @ankitrox !

One small point about the CTA link. We should use the getServiceURL selector with the current publication ID passed to get the URL for the CTA. Could you please update it?

Thanks!

[ankitrox]

@nfmohit Thank you for reviewing the IB.

I've amended the suggested point. Assigning back to you.

[nfmohit]

Thanks @ankitrox ! IB LGTM 👍 ✅