-
Notifications
You must be signed in to change notification settings - Fork 799
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RNA Connection: Add ConnectScreenRequiredPlan Component #21521
Conversation
Caution: This PR has changes that must be merged to WordPress.com |
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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. Beta plugin:
Jetpack plugin:
Debug Helper plugin:
Backup plugin:
Vaultpress plugin:
Boost plugin:
Search plugin:
|
projects/js-packages/connection/components/connect-screen-required-plan-visual/style.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @fgiannar!
The PR is impressive, thanks for doing that!
We probably need to discuss a few things, but great job overall!
projects/js-packages/components/components/pricing-card/index.jsx
Outdated
Show resolved
Hide resolved
projects/js-packages/connection/components/connect-screen-required-plan-visual/style.scss
Outdated
Show resolved
Hide resolved
projects/js-packages/connection/components/connect-screen-required-plan-visual/index.jsx
Outdated
Show resolved
Hide resolved
projects/js-packages/connection/components/connect-screen-required-plan-visual/index.jsx
Outdated
Show resolved
Hide resolved
projects/js-packages/connection/components/connect-screen-required-plan-visual/index.jsx
Outdated
Show resolved
Hide resolved
Hi @fgiannar! A couple of things I noticed on the functionality side.
|
Thanks Sergey!
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
Those components will probably go live with the Backup plugin next release.
I was also hoping that this will get resolved on its own when we implement the Store related changes. Then Another solution could be to completely hide the whole |
…omattic/jetpack into add/rna-connect-screen-required-plan
@sergeymitr You might notice that I added |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job @fgiannar, let's ship it!
Great news! One last step: head over to your WordPress.com diff, D68960-code, and commit it. Thank you! |
r234115-wpcom |
* master: (40 commits) docker: Add script to create "fake" translations for testing i18n (#21407) Add webpack-config package (#21482) Update dependency composer/semver to v3.2.6 (#21608) Update dependency eslint-plugin-import to v2.25.2 (#21607) Update JS unit testing packages (#21605) Admin page: Fix pricing/currency displayed on the upgrade page (#21594) Update dependency @rollup/plugin-node-resolve to v13.0.6 (#21599) Publicize: Add new publicize icon toggle component (#20957) Search: hide search menu for atomic sites (#21565) Allow /wp/v2/sites/1234/batch endpoint to process widget updates (#21549) tooling: Add `.mjs` as a JavaScript extension (#21589) Jetpack: PHPCS src/class-tracking (#21583) Publicize: make the default social media message blank (#21477) Photon: do not serve Wikipedia images from CDN. (#21572) Publicize: update endpoint (#21510) [Plugin] Backup: Update initial backup screen (#21559) RNA Connect Screen: Remove unused files (#21570) RNA Connection: Add ConnectScreenRequiredPlan Component (#21521) Update PHPUnit coverage configs (#21557) cli: Fix skeleton phpunit config (#21555) ...
Adds the
ConnectScreenRequiredPlan
injetpack-connection
package.Changes proposed in this Pull Request:
Connection js package:
ConnectScreenRequiredPlan
along with its visual counterpart, stories and tests.ConnectScreenLayout
helper layout component that contains the common logic between the two different Connect ScreensConnectScreen
adding its visual counterpart and making use ofConnectScreenLayout
Components js package:
PricingCard
component to accept children, makes the CTA optional and fixes the prices PropTypesStorybook js package:
Connection-ui package
ConnectScreen
withConnectScreenRequiredPlan
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
cd projects/js-packages/storybook
pnpm install
Design considerations (cc @keoshi )
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.Testing instructions (Crew) - Phase 2:
autoTrigger
totrue
and confirm you are automatically connected.Hacks (to be addressed in follow-up PRs)
ConnectButton
. Right now I used a hacky css solution to make it show as a link.ActionButton
to parent containers (also discussed here)Design logic
Before introducing the
ConnectScreenRequiredPlanVisual
I created the Story taking advantage ofmsw
(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 ofConnectScreenRequiredPlan
.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 whileConnectScreenRequiredPlan
aConnectButton
component.I've also considered initially a composite component that could take advantage of the existingConnectScreen
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