wp-calypso
wp-calypso copied to clipboard
Automattic
Checkoutv2: Implement checkout redesign ab test
This PR adds the useCheckoutV2() hook to return a string based on the state the checkout experiment is in - either 'loading', 'treatment', or 'control'.
Additionally, this code allows you to see the checkout v2 treatment without the feature flag. You can assign yourself to the treatment by following these steps: PCYsg-SwK-p2 (scroll down to 'Manually assign with Abacus assignment bookmarklet').
Related to pbOQVh-45k-p2
Testing Instructions
- Go to Checkout and ensure the v1 version looks correct - look for any style or functionality bleed
- Assign yourself to the treatment group according to the instructions in the link above
- Go to Checkout again and make sure the v2 styles and functionality match those found under the checkout v2 feature flag
- Test a number of products and use cases to ensure that styling remains the same between the feature flagged v2 and the non-flagged 'treatment' v2
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:
Sections (~449 bytes added 📈 [gzipped])
name parsed_size gzip_size
checkout +1871 B (+0.1%) +448 B (+0.1%)
site-purchases -305 B (-0.0%) -79 B (-0.0%)
purchases -305 B (-0.0%) -79 B (-0.0%)
plans +267 B (+0.0%) +4 B (+0.0%)
jetpack-connect +267 B (+0.0%) +4 B (+0.0%)
jetpack-cloud-pricing +267 B (+0.0%) +4 B (+0.0%)
jetpack-cloud-plugin-management +267 B (+0.0%) +5 B (+0.0%)
jetpack-cloud-manage-pricing +267 B (+0.1%) +4 B (+0.0%)
jetpack-cloud-features-comparison +267 B (+0.0%) +4 B (+0.0%)
jetpack-cloud-agency-sites-v2 +267 B (+0.0%) +4 B (+0.0%)
jetpack-cloud-partner-portal +257 B (+0.0%) -11 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 (~2580 bytes added 📈 [gzipped])
name parsed_size gzip_size
async-load-calypso-my-sites-checkout-modal +8123 B (+0.7%) +2580 B (+0.8%)
async-load-calypso-blocks-editor-checkout-modal +8123 B (+0.7%) +2580 B (+0.8%)
async-load-signup-steps-page-picker +7387 B (+1.6%) +2444 B (+1.8%)
async-load-purchase-modal-wrapper +7387 B (+1.7%) +2444 B (+1.9%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou... +7387 B (+1.7%) +2444 B (+1.9%)
async-load-masterbar-cart-masterbar-cart-wrapper +267 B (+0.2%) +4 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.
Jetpack Cloud live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-98834&env=jetpack |
This PR modifies the release build for the following Calypso Apps:
For info about this notification, see here: PCYsg-OT6-p2
- wpcom-block-editor
To test WordPress.com changes, run install-plugin.sh $pluginSlug checkoutv2/implement-redesign-ab-test on your sandbox.