wp-calypso
wp-calypso copied to clipboard
Automattic
Signup: Add extra page price display on page selector step
Proposed Changes
Adds a dummy basket to the page picker step so that the customer has some feedback of the cost incurred when purchasing extra pages.
Implementation Details
-
New site
- [x] Show a dummy basket with a pro plan, DIFM, and extra page line items
-
Existing site
- [x] Existing site will add items to the calypso cart and then show the line items with the dummy UI design
- [x] Existing site which has a paid plan will not show the pro plan in the basket
- [x] Existing site which does not have a paid plan will show the pro/premium plan in the basket based on the pro plan feature flag
-
Common
- [x] Implementation is mobile ready
- [x] Extra pages line item and The total will be updated as the relevant number of extra pages area selected
- [x] Remove cart product addition logic for existing site when signup flow completes
| Mobile | Desktop |
|---|---|
 |
 |
Testing Instructions
Make sure Implementation Details are working properly
Related to #62848
Jetpack Cloud live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-42024&env=jetpack |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This PR modifies the release build for editing-toolkit
To test your changes on WordPress.com, run install-plugin.sh editing-toolkit add/extra-page-cart-display on your sandbox.
To deploy your changes after merging, see the documentation: PCYsg-mMA-p2
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:
App Entrypoints (~107 bytes added 📈 [gzipped])
name parsed_size gzip_size
entry-main +319 B (+0.0%) +92 B (+0.0%)
entry-stepper +158 B (+0.0%) +38 B (+0.0%)
entry-login +126 B (+0.0%) +23 B (+0.0%)
entry-gutenboarding +126 B (+0.0%) +23 B (+0.0%)
entry-domains-landing +126 B (+0.0%) +23 B (+0.0%)
entry-browsehappy +126 B (+0.1%) +23 B (+0.1%)
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.
Sections (~773 bytes added 📈 [gzipped])
name parsed_size gzip_size
signup +715 B (+0.2%) +75 B (+0.1%)
jetpack-connect +715 B (+0.1%) +76 B (+0.0%)
accept-invite +715 B (+0.2%) +75 B (+0.1%)
checkout +521 B (+0.0%) +131 B (+0.0%)
jetpack-cloud-plugin-management +167 B (+0.0%) +42 B (+0.0%)
site-purchases +154 B (+0.0%) +37 B (+0.0%)
purchases +154 B (+0.0%) +37 B (+0.0%)
plans +154 B (+0.0%) +50 B (+0.0%)
marketplace +154 B (+0.0%) +59 B (+0.0%)
jetpack-cloud-agency-dashboard +154 B (+0.0%) +47 B (+0.0%)
email +154 B (+0.0%) +53 B (+0.0%)
domains +154 B (+0.0%) +37 B (+0.0%)
woocommerce-installation +32 B (+0.0%) +15 B (+0.0%)
themes +32 B (+0.0%) +15 B (+0.0%)
theme +32 B (+0.0%) +15 B (+0.0%)
stats +32 B (+0.0%) +15 B (+0.0%)
settings-writing +32 B (+0.0%) +13 B (+0.0%)
settings-security +32 B (+0.0%) +15 B (+0.0%)
settings-performance +32 B (+0.0%) +15 B (+0.0%)
settings-jetpack +32 B (+0.0%) +15 B (+0.0%)
settings-discussion +32 B (+0.0%) +14 B (+0.0%)
settings +32 B (+0.0%) +15 B (+0.0%)
scan +32 B (+0.0%) +15 B (+0.0%)
purchase-product +32 B (+0.0%) +16 B (+0.0%)
posts-custom +32 B (+0.0%) +15 B (+0.0%)
posts +32 B (+0.0%) +15 B (+0.0%)
plugins +32 B (+0.0%) +15 B (+0.0%)
people +32 B (+0.0%) +14 B (+0.0%)
migrate +32 B (+0.0%) +16 B (+0.0%)
media +32 B (+0.0%) +10 B (+0.0%)
marketing +32 B (+0.0%) +15 B (+0.0%)
jetpack-social +32 B (+0.0%) +16 B (+0.0%)
jetpack-search +32 B (+0.0%) +15 B (+0.0%)
jetpack-cloud-settings +32 B (+0.0%) +15 B (+0.0%)
jetpack-cloud-pricing +32 B (+0.0%) +15 B (+0.0%)
jetpack-cloud-partner-portal +32 B (+0.0%) +14 B (+0.0%)
jetpack-cloud +32 B (+0.0%) +17 B (+0.0%)
hosting +32 B (+0.0%) +15 B (+0.0%)
home +32 B (+0.0%) +12 B (+0.0%)
help +32 B (+0.0%) +18 B (+0.0%)
gutenberg-editor +32 B (+0.0%) +15 B (+0.0%)
google-my-business +32 B (+0.0%) +15 B (+0.0%)
earn +32 B (+0.0%) +14 B (+0.0%)
backup +32 B (+0.0%) +15 B (+0.0%)
add-ons +32 B (+0.0%) +15 B (+0.0%)
activity +32 B (+0.0%) +15 B (+0.0%)
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 (~7132 bytes added 📈 [gzipped])
name parsed_size gzip_size
async-load-signup-steps-page-picker +32056 B (+35.8%) +8793 B (+30.3%)
async-load-masterbar-cart-masterbar-cart-wrapper +517 B (+0.4%) +126 B (+0.3%)
async-load-calypso-my-sites-checkout-modal +489 B (+0.0%) +116 B (+0.0%)
async-load-calypso-blocks-editor-checkout-modal +489 B (+0.0%) +116 B (+0.0%)
async-load-signup-steps-plans +314 B (+0.1%) +59 B (+0.1%)
async-load-signup-steps-plans-atomic-store +211 B (+0.1%) +48 B (+0.1%)
async-load-signup-steps-emails +211 B (+0.2%) +42 B (+0.1%)
async-load-signup-steps-domains +211 B (+0.0%) +28 B (+0.0%)
async-load-calypso-components-jetpack-sidebar +154 B (+0.1%) +51 B (+0.1%)
async-load-calypso-my-sites-sidebar +122 B (+0.1%) +35 B (+0.1%)
async-load-calypso-layout-masterbar-checkout-tsx +122 B (+0.1%) +30 B (+0.1%)
async-load-calypso-layout-masterbar-checkout +122 B (+0.2%) +30 B (+0.2%)
async-load-signup-steps-woocommerce-install-transfer +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-woocommerce-install-step-store-address +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-woocommerce-install-step-business-info +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-woocommerce-install-confirm +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-user +89 B (+0.0%) +13 B (+0.0%)
async-load-signup-steps-theme-selection +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-test-step +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-store-features +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-starting-point +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-social-profiles +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-site-type +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-site-title +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-site-picker +89 B (+0.0%) +13 B (+0.0%)
async-load-signup-steps-site-or-domain +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-site-options +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-site +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-rewind-were-backing +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-rewind-migrate +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-rewind-form-creds +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-reader-landing +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-site +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-join-workspace +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-get-started +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-details +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-confirm-email +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-p2-complete-profile +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-new-or-existing-site +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-intent +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-difm-site-picker +89 B (+0.0%) +13 B (+0.0%)
async-load-signup-steps-design-picker +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-creds-permission +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-creds-confirm +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-creds-complete +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-courses +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-start +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-ready +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-point +89 B (+0.0%) +13 B (+0.0%)
async-load-signup-steps-clone-jetpack +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-destination +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-credentials +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-clone-cloning +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-add-ons +89 B (+0.1%) +13 B (+0.0%)
async-load-signup-steps-website-content +76 B (+0.1%) +6 B (+0.0%)
async-load-design-playground +32 B (+0.0%) +15 B (+0.0%)
async-load-design-blocks +32 B (+0.0%) +15 B (+0.0%)
async-load-design +32 B (+0.0%) +15 B (+0.0%)
async-load-calypso-reader-sidebar +32 B (+0.0%) +15 B (+0.0%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice +32 B (+0.0%) +17 B (+0.1%)
async-load-calypso-my-sites-current-site-notice +32 B (+0.0%) +16 B (+0.1%)
async-load-calypso-components-web-preview-component +32 B (+0.0%) +15 B (+0.0%)
async-load-calypso-blocks-jitm-templates-sidebar-banner +32 B (+0.0%) +15 B (+0.1%)
async-load-calypso-blocks-jitm-templates-notice +32 B (+0.0%) +15 B (+0.1%)
async-load-calypso-blocks-jitm-templates-default +32 B (+0.0%) +16 B (+0.1%)
async-load-calypso-blocks-inline-help-popover +32 B (+0.0%) +12 B (+0.0%)
async-load-calypso-blocks-app-banner +32 B (+0.1%) +15 B (+0.2%)
async-load-automattic-help-center +32 B (+0.0%) +12 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.
Thank you very much for the fantastic feedback @sirbrillig I have fixed the issues that you raised. :)
In the New Site flow, the line item for Extra Pages is displayed for 0 items also.
I actually left this in as per the design. I could either remove it here or try to add it when going through with the existing site. What do you think?
Design : uHneAuPrNrodQAvefnzbIA-fi-3768%3A5408 CC - @mikeicode
I actually left this in as per the design. I could either remove it here or try to add it when going through with the existing site.
Let's leave it. The benefit being if a user ignores the paragraph of text at the top of the page this text still explains that it's possible to purchase extra pages.
We should also disable clicks (or add debounce) on the page tile when the cart is loading.
This has been fixed with a debounce ! :) @aneeshd16
@mikeicode the PR should be ready for a confidence check now :)
I could not reproduce that currency issue @aneeshd16. However I have now completely switched to a loader whenever the currency code is loading so there wont be any fallback USD pricing. But that bug is strange since the numeric value seems to have the correct currency value even if the unit is not shown properly. Please let me know if you can reproduce this.
I could not reproduce that currency issue @aneeshd16. However I have now completely switched to a loader whenever the currency code is loading so there wont be any fallback USD pricing. But that bug is strange since the numeric value seems to have the correct currency value even if the unit is not shown properly. Please let me know if you can reproduce this.
Thanks! I managed to reproduce this, but it involves changing the currency manually via SA, so I think this is an edge case. A cart for that site already existed in the INR currency. After switching to USD, the Calypso UI started using USD, but the cart still used INR.
The fix for this is actually simple - instead of getCurrentUserCurrencyCode, we can use the currency field from the response cart: https://github.com/Automattic/wp-calypso/blob/8a0f7c62407f7f13a92418f220a8e397a5704a55/packages/shopping-cart/src/types.ts#L246
This will ensure that the mini-cart will always use the same currency as the actual cart.
