RNA Connection: Add ConnectScreenRequiredPlan Component

[fgiannar]

Adds the ConnectScreenRequiredPlan in jetpack-connection package.

Changes proposed in this Pull Request:

Connection js package:

• Adds the ConnectScreenRequiredPlan along with its visual counterpart, stories and tests.
• Adds the ConnectScreenLayout helper layout component that contains the common logic between the two different Connect Screens
• Updates the ConnectScreen adding its visual counterpart and making use of ConnectScreenLayout

Components js package:

• Updates the PricingCard component to accept children, makes the CTA optional and fixes the prices PropTypes

Storybook js package:

• Adds the connection-package to Storybook
• Adds a public folder for storing static assets, like images for Storybook stories.

Connection-ui package

• Replaces the ConnectScreen with ConnectScreenRequiredPlan for testing purposes.

Jetpack product discussion

1200295095943283-as-1201123230360951/f

Does this pull request change what data or activity we track or use?

No

Testing instructions (Design) - Phase 1:

Test Storybook

• Go to the Story book folder cd projects/js-packages/storybook
• pnpm install
• pnpm run storybook:dev
• Your browser should open with Storybook
• Go to Connection/Connect Screen with Required Plan and play around with it.

Design considerations (cc @keoshi )

• Checkout the Errored story in Storybook. The error displayed under the Log in link is not ideal. We are considering using notices in the future, however pls let me know if the current UI is not acceptable.
• Make sure to test for various viewports. The design was only for desktops so I improvised a bit :)

Testing instructions (Crew) - Phase 2:

• Go to Tools -> Connection Manager, disconnect if needed, then connect again by clicking "Get Jetpack"
• Disconnect and connect again but this time by clicking "Log in"
• Disconnect, change autoTrigger to true and confirm you are automatically connected.
• Disconnect if needed, Go to Jetpack dashboard and confirm the Connect Screen hasn't changed and you can successfully connect your account. Make sure to test with a Secondary user as well.
• Go to Jetpack->Backup and repeat the above confirming nothing has changed there as well.

Hacks (to be addressed in follow-up PRs)

• Accept button props in ConnectButton. Right now I used a hacky css solution to make it show as a link.
• Move the error display logic from ActionButton to parent containers (also discussed here)

Design logic

Before introducing the ConnectScreenRequiredPlanVisual I created the Story taking advantage of msw (Mock Service Worker). MSW captures network requests and returns a mocked response.
However this didn't feel "clean" enough so I decided to introduce the ConnectScreenRequiredPlanVisual which is the visual counterpart of ConnectScreenRequiredPlan.
You might notice the latter takes advantage of the renderConnectBtn render prop, in order for its consumers to define the connect button component and how we want it rendered.
Storybook will pass an ActionButton component while ConnectScreenRequiredPlan a ConnectButton component.

I've also considered initially a composite component that could take advantage of the existing ConnectScreen component but after breaking it down they are so different that it's not worth it.
I'm now using the ConnectScreenLayout helper layout component that contains the common logic between the two different Connect Screens

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello fgiannar! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D68960-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Beta plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

---

Jetpack plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

---

Debug Helper plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

---

Backup plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

---

Vaultpress plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

---

Boost plugin:

• Next scheduled release: November 30, 2021.
• Scheduled code freeze: November 23, 2021.

---

Search plugin:

• Next scheduled release: November 2, 2021.
• Scheduled code freeze: October 25, 2021.

[sergeymitr]

Hi @fgiannar!
The PR is impressive, thanks for doing that!
We probably need to discuss a few things, but great job overall!

[sergeymitr]

Hi @fgiannar!
Awesome work restructuring the components, looks neat!

A couple of things I noticed on the functionality side.

1. The error message for the "login" button breaks up the line.

Considering that we're going to be replacing that with the RNA Notices (p9dueE-3HB-p2), we might be fine ignoring this issue for now. It depends on when these new components will go live. Do you know what's the plan on this?

2. The "login" and "Get Jetpack Backup" buttons don't get disabled when one of them gets clicked. So you can click them both one after another, and they both show the loader icon.
   I've run into the same issue in the IDC package, and solved it by introducing global isActionInProgress flag in the store. Here's an example of how it works: https://github.com/Automattic/jetpack/blob/master/projects/js-packages/idc/components/safe-mode/index.jsx
   If you need help with that, feel free to ping me in Slack.

[fgiannar]

Thanks Sergey!

The error message for the "login" button breaks up the line.

Yes, I'm aware of that, thanks! As mentioned in the PR description waiting for Design to confirm whether this is acceptable for now until we either switch to Notices or at least add button related properties to ActionButton .

It depends on when these new components will go live. Do you know what's the plan on this?

Those components will probably go live with the Backup plugin next release.

The "login" and "Get Jetpack Backup" buttons don't get disabled when one of them gets clicked.

I was also hoping that this will get resolved on its own when we implement the Store related changes. Then isRegistering and isUserConnecting actions will be dispatched from the Store instead of being handled internally in ConnectButton. Not sure if it's worth to introduce a generic isActionInProgress flag in the meantime.. Do you think we can aim for this in the following 2 weeks? Or maybe agree to address it in a follow up PR that will not involve Design?

Another solution could be to completely hide the whole Already have a subscription? Log in to get started message for now and re-introduce it later when we have solved the aforementioned issues (cc @keoshi )

[fgiannar]

@sergeymitr You might notice that I added style.scss and image-slider.jsx back to connect-screen dir. I did this to unblock Fusion so that the WPCOM counterpart is automatically updated with our changes.

[sergeymitr]

Great job @fgiannar, let's ship it!

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D68960-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[fgiannar]

r234115-wpcom