Implement `<PublicationCreate>` component

[nfmohit]

Feature Description

A <PublicationCreate> component should be added to the Reader Revenue Manager module that encapsulates the publication creation flow.

Screenshots 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

• A PublicationCreate component should be created for the Reader Revenue Manager module to facilitate the creation of a new publication matching the Figma designs.
  • Note: The component should only include account creation content, i.e. the text and the CTA. The rest of the content (e.g. module name, footer, "Cancel" button, etc.) will be a part of the container component, e.g. SetupMain/SettingsEdit. See screenshot for reference:
• The component should have two steps:
  • First step:
    • Text: "To complete your Reader Revenue Manager account setup you will need to create a publication."
    • Sub-text: "Once you have created your publication, it is submitted for review."
    • CTA: "Create publication" (with external link icon). This should open the publisher center in a new browser tab, using the getServiceURL() selector (being implemented in #8848).
  • If at any point in the component's lifecycle, it is detected that a publication is available for the user, that should be set as the connected publication and the second step should be shown:
    • Text: "You have successfully created your publication and it is now awaiting review. This might take up to 2 weeks."
    • CTA: "Complete setup". This should pass a callback to its parent component asking it to complete module setup.

Implementation Brief

PublicationCreate component

In the assets/js/module/reader-revenue-manager/components/common directory, create a new component, PublicationCreate.js:

• Create a function component, PublicationCreate that renders the publication creation flow.
• It should receive a onCompleteSetup prop, a callback function to be called when the user clicks the CTA to complete the setup.
• Retrieve the publication list from the getPublications selector.
• Get the service URL to create a publication using the getServiceURL selector.
• If there is no publication in the list, render the first step of the component with the following:
  • Text: "To complete your Reader Revenue Manager account setup you will need to create a publication."
  • Sub-text: "Once you have created your publication, it is submitted for review."
  • CTA button with the label "Create publication" and an external link icon.
  • Pass the service URL to the CTA button's onClick handler.
• If a publication is available, render the second step of the component with the following:
  • Text: "You have successfully created your publication and it is now awaiting review. This might take up to 2 weeks."
  • CTA button with the label "Complete setup".
  • Pass the onCompleteSetup prop to the CTA button's onClick handler.
• The styles should match the Figma designs

Test Coverage

• Add storybook stories for the PublicationCreate component in assets/js/module/reader-revenue-manager/components/common/PublicationCreate.stories.js.
• Add test coverage for the PublicationCreate component in assets/js/module/reader-revenue-manager/components/common/PublicationCreate.test.js.

QA Brief

• As of now, the PublicationCreate component cannot be tested individually. It should be tested as part of the Reader Revenue Manager module setup flow in #8800. However, the text and the CTA should be verified with the stories in the Storybook.
• Verify the first step of the PublicationCreate component story in Storybook.
• Verify the second step of the PublicationCreate component story in Storybook.

Changelog entry

• Add the PublicationCreate component that encapsulates the publication creation flow for the Reader Revenue Manager module, presented in Storybook.

[nfmohit]

Nice work, @hussain-t ! IB LGTM 👍 ✅

[techanvil]

Hey @hussain-t, the Storybook links in the QAB were pointing to the wrong PR, so I've fixed them.

However - once the PR is merged, the Storybook deployment for the PR will be deleted, so the QAB won't be so useful when it actually comes to QA. I'm not sure if you meant to link to the develop Storybook, or to both the PR and develop versions. Anyhow, please can you update the QAB accordingly?

[hussain-t]

Thanks for pointing it out, @techanvil. I meant to point the links to develop. I've updated the QAB.

[kelvinballoo]

QA Update ⚠️

2 items to check:

1. The links in the QAB (e.g. https://google.github.io/site-kit-wp/storybook/pull/9088/?path=/story/modules-readerrevenuemanager-setup-publicationcreate--without-publication) is not workable. I have been looking at https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-readerrevenuemanager-setup-publicationcreate--without-publication instead. I believe that's the correct one but LMK if otherwise.

2. Main flag is that the CTA font weight is currently at 400 when it should be 500 from Figma.

   Figma: 500 Implementation: 400

[hussain-t]

Hi @kelvinballoo, sorry about it. Yes, you have spotted the correct URL.

As for the CTA font size, we should keep it consistent with all the buttons. Please take a look at this comment. And the Figma discussions.

[kelvinballoo]

QA Update ✅

Thanks @hussain-t . Looks like it will be fixed under https://github.com/google/site-kit-wp/issues/8856

This ticket can be moved to approval then as the following have been verified as good: ✅

• The text and the CTA were verified with the following stories from the Storybook: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-readerrevenuemanager-setup-publicationcreate--without-publication https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-readerrevenuemanager-setup-publicationcreate--with-publications
• Font size, font family, text colours are consistent with figma ✅

• The buttons have a hover effect ✅