wp-calypso
wp-calypso copied to clipboard
Automattic
Add a unified Plans step that is completely shared between Stepper and Start
Context: pdDR7T-1Ed-p2#comment-2179
Depends on https://github.com/Automattic/wp-calypso/pull/93035
Proposed Changes
This aims to create the thinnest wrapper possible to wrap the Plans step in /start and have it in Stepper as well, to achieve parity without repeating any work.
Why are these changes being made?
To be able to delete client/landing/stepper/declarative-flow/internals/steps-repository/plans and have a single Plans step across all frameworks and places. And to have all the improvements that go into the plans step shared between Stepper and Start.
Testing Instructions
- Go to /setup/onboarding.
- Play with the plans step.
- It should be identical to the one at /start/plans.
- If you select a free domain, it should show the free plan is a column.
- If you pick a paid domain, it should show the free plan de-emphasized in the subheader.
- Clicking the subheader should show a dialog.
- Picking a plan from the dialog should land you checkout with the correct plan.
- Pick "Continue with free domain" should remove the paid domain and land you in site-setup flow.
In general, it should be an exact UX replica of /start/plans.
Jetpack Cloud live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-118562&env=jetpack |
Automattic for Agencies live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-118562&env=a8c-for-agencies |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:
App Entrypoints (~62 bytes added 📈 [gzipped])
name parsed_size gzip_size
entry-subscriptions -463 B (-0.0%) -76 B (-0.0%)
entry-login -360 B (-0.0%) -56 B (-0.0%)
entry-domains-landing -360 B (-0.1%) -56 B (-0.0%)
entry-browsehappy -360 B (-0.2%) -56 B (-0.1%)
entry-main -263 B (-0.0%) -29 B (-0.0%)
entry-stepper -164 B (-0.0%) +55 B (+0.0%)
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.
Sections (~76161 bytes added 📈 [gzipped])
name parsed_size gzip_size
onboarding-flow -24856 B (-79.4%) -8393 B (-81.6%)
link-in-bio-tld-flow +835 B (+0.0%) -460 B (-0.1%)
signup +771 B (+0.3%) +58 B (+0.1%)
update-design-flow +690 B (+0.1%) -784 B (-0.2%)
media -299 B (-0.0%) -420 B (-0.1%)
plugins +267 B (+0.0%) +785 B (+0.1%)
staging-site +257 B (+0.0%) +73 B (+0.0%)
sites-dashboard +257 B (+0.0%) +73 B (+0.0%)
site-monitoring +257 B (+0.0%) +73 B (+0.0%)
site-logs +257 B (+0.0%) +73 B (+0.0%)
settings +257 B (+0.0%) +73 B (+0.0%)
hosting-features +257 B (+0.0%) +73 B (+0.0%)
hosting +257 B (+0.0%) +73 B (+0.0%)
home +257 B (+0.0%) +38 B (+0.0%)
github-deployments +257 B (+0.0%) +73 B (+0.0%)
subscribers +213 B (+0.0%) +61 B (+0.0%)
domains -205 B (-0.0%) -797 B (-0.1%)
jetpack-cloud-plugin-management +196 B (+0.0%) +758 B (+0.1%)
jetpack-cloud-partner-portal -196 B (-0.0%) -393 B (-0.1%)
hundred-year-plan +165 B (+0.5%) +18 B (+0.2%)
account -157 B (-0.0%) -419 B (-0.2%)
tailored-ecommerce-flow -137 B (-0.2%) -47 B (-0.7%)
plans -125 B (-0.0%) -950 B (-0.2%)
a8c-for-agencies-signup -103 B (-0.1%) -35 B (-0.1%)
videopress-flow -98 B (-0.0%) -115 B (-0.0%)
import-hosted-site-flow +98 B (+0.0%) +49 B (+0.0%)
domain-user-transfer-flow -90 B (-0.0%) +66 B (+0.1%)
site-purchases +84 B (+0.0%) -46 B (-0.0%)
purchases +84 B (+0.0%) -52 B (-0.0%)
reblogging-flow +79 B (+1.5%) +21 B (+1.2%)
newsletter-flow +79 B (+0.4%) +11 B (+0.2%)
link-in-bio-flow +79 B (+0.4%) +10 B (+0.2%)
copy-site-flow +75 B (+0.0%) +209 B (+0.1%)
theme +71 B (+0.0%) -29 B (-0.0%)
jetpack-app +71 B (+0.0%) +30 B (+0.0%)
checkout +69 B (+0.0%) -536 B (-0.1%)
design-first-flow +56 B (+0.2%) +9 B (+0.2%)
themes +39 B (+0.0%) +69 B (+0.0%)
site-blocks +39 B (+0.0%) +6 B (+0.0%)
security +39 B (+0.0%) +4 B (+0.0%)
privacy +39 B (+0.0%) +6 B (+0.0%)
notification-settings +39 B (+0.0%) +6 B (+0.0%)
me +39 B (+0.0%) +6 B (+0.0%)
marketplace +39 B (+0.0%) +12 B (+0.0%)
jetpack-connect +39 B (+0.0%) +11 B (+0.0%)
jetpack-cloud-pricing +39 B (+0.0%) +11 B (+0.0%)
jetpack-cloud-features-comparison +39 B (+0.0%) +8 B (+0.0%)
help +39 B (+0.0%) +6 B (+0.0%)
email +39 B (+0.0%) -133 B (-0.1%)
developer +39 B (+0.0%) +6 B (+0.0%)
account-close +39 B (+0.0%) +6 B (+0.0%)
stats +32 B (+0.0%) +20 B (+0.0%)
posts-custom +32 B (+0.0%) +18 B (+0.0%)
posts +32 B (+0.0%) +18 B (+0.0%)
migrate +32 B (+0.0%) +25 B (+0.0%)
with-theme-assembler-flow -29 B (-0.0%) -27 B (-0.2%)
update-options-flow -29 B (-0.1%) -32 B (-0.5%)
trial-wooexpress-flow -29 B (-0.1%) -30 B (-0.4%)
site-setup-wg -29 B (-0.0%) -30 B (-0.2%)
site-setup-flow -29 B (-0.0%) -30 B (-0.2%)
site-migration-flow -29 B (-0.0%) -30 B (-0.3%)
readymade-template-flow -29 B (-0.0%) -33 B (-0.1%)
migration-signup -29 B (-0.1%) -29 B (-0.4%)
migration-flow -29 B (-0.0%) -30 B (-0.2%)
import-flow -29 B (-0.0%) -31 B (-0.3%)
hosted-site-migration-flow -29 B (-0.0%) -29 B (-0.3%)
free-post-setup-flow -29 B (-0.1%) -31 B (-0.5%)
free-flow -29 B (-0.0%) -30 B (-0.3%)
entrepreneur-flow -29 B (-0.0%) -32 B (-0.1%)
assembler-first-flow -29 B (-0.0%) -30 B (-0.2%)
ai-assembler-flow -29 B (-0.0%) -33 B (-0.2%)
start-writing-flow -24 B (-0.1%) -8 B (-0.1%)
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.
Async-loaded Components (~2985 bytes removed 📉 [gzipped])
name parsed_size gzip_size
async-load-signup-steps-plans-theme-preselected +13552 B (+3.7%) +5672 B (+4.7%)
async-load-signup-steps-plans +13376 B (+3.7%) +5374 B (+4.5%)
async-load-signup-steps-site-options -196 B (-0.5%) -588 B (-4.5%)
async-load-design-blocks +71 B (+0.0%) +30 B (+0.0%)
async-load-calypso-blocks-editor-checkout-modal +52 B (+0.0%) -50 B (-0.0%)
async-load-purchase-modal-wrapper +39 B (+0.0%) +11 B (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou... +39 B (+0.0%) +11 B (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice +39 B (+0.2%) +10 B (+0.2%)
async-load-calypso-layout-masterbar-checkout-tsx +39 B (+0.0%) +11 B (+0.0%)
async-load-calypso-layout-masterbar-checkout +39 B (+0.1%) +10 B (+0.0%)
async-load-signup-steps-domains -23 B (-0.0%) +85 B (+0.1%)
async-load-design-playground +13 B (+0.0%) +79 B (+0.0%)
async-load-design +13 B (+0.0%) +79 B (+0.0%)
async-load-calypso-my-sites-checkout-modal +13 B (+0.0%) -26 B (-0.0%)
React components that are loaded lazily, when a certain part of UI is displayed for the first time.
Legend
What is parsed and gzip size?
Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.
Generated by performance advisor bot at iscalypsofastyet.com.
Testing -
setup/onboarding/plans:
- Page breaks when I select an item from the yearly/monthly/etc plan dropdown
- Slight difference in font size for the plan names when you view "compare plans" grid.
- Sometimes doesn't navigate to the
/checkout
Comparing localhost using yarn start and wordpress.com, I found these differences.
- Back button present in localhost
- Titles are diverging
- Subtitle missing in localhost
- Plans dropdown break when changing payment type
Same issues are present also on mobile
Localhost:
Production:
@renancarvalho Regarding this. it seems you're comparing /setup/onboarding/plans to /setup/onboarding/plans in production, you should compare to /start/plans. Not /setup/onboarding/plans.
I see prices with US$ and size 1.75rem in Start and only $ and 2.75rem in Stepper
Minor spacing differences. There is a bit more spacing between the header and subheader on /start/plans and a bit more spacing at the bottom of the page. Good work!
- [x] If you select a free domain, it should show the free plan is a column. And should not have a subheader.
- [x] If you pick a paid domain, it should show the free plan de-emphasized in the subheader
- [ ] Picking a plan from the dialog should land you checkout with the correct plan.
- [ ] Pick "Continue with free domain" should remove the paid domain and land you in site-setup flow
@alshakero - For /setup/onboarding/plans : When I select a paid plan from the dialog, I always end up on /home. Regardless if I select the paid option or the continue with free domain option.
When comparing http://calypso.localhost:3000/setup/onboarding/plans x https://wordpress.com/start/plans
Noticed some tinny things
1 Back button is visible in PROD when using mobile and not available on localhost
2
https://github.com/user-attachments/assets/50b8d7f5-6c72-4961-9aa8-d6e9364d202c
3 When clicking compare plans
https://github.com/user-attachments/assets/f3fa1b1f-8f9b-4ee2-a2d9-e1c5ef8ab342
4 After selecting a plan, the animation on the processing step are different, Localhost uses the progress bar and prod uses the animated ellipsis
I see prices with US$ and size 1.75rem in Start and only $ and 2.75rem in Stepper
Fixed this. It seems that we run geolocateCurrencySymbol() in start but it is missing in stepper. Added this.
I have also added a new stylesheet in the unified-plans step to handle the styling differences.
Having domains in cart shows the free plan. It should be hidden in this case.
I saw a js crash on domainCartItems.slice( 0 ) at one point but I can't reproduce now.
EDIT: it's reproducible by clicking "choose a domain later" and selecting a paid plan
https://user-images.githubusercontent.com/7000684/364903484-d395feb7-567b-44c0-8f86-d8b7a6744f57.mp4