wp-calypso
wp-calypso copied to clipboard
New purchase cancelation dialog
P2: pebzTe-6r-p2
- Add new remove-plan-dialog component to the remove purchases page
#### Issue 1039-gh-Automattic/martech
Acceptance Criteria
1039-gh-Automattic/martech
Proposed Changes
- Add a new dialog component to show up before the user starts the cancelation flow.
Testing Instructions
- Checkout update/pre-cancelation-modal
- Test Calypso locally
- Visit http://calypso.localhost:3000/
- Select a site with an active subscription plan
- Click on te sidebar item Upgrade / Purchases
- Select the plan
- Click on the CTA `Remove <Plan name> plan.
Before

After
https://user-images.githubusercontent.com/5706607/188671098-defa794a-7b57-435c-839c-1d31c1eef619.mp4
Issue
Related to 1039-gh-Automattic/martech
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:
App Entrypoints (~779 bytes added 📈 [gzipped])
name parsed_size gzip_size
entry-stepper +3036 B (+0.1%) +779 B (+0.1%)
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.
Sections (~2817 bytes added 📈 [gzipped])
name parsed_size gzip_size
site-purchases +9872 B (+0.7%) +2817 B (+0.8%)
purchases +9872 B (+0.6%) +2817 B (+0.7%)
domains +9183 B (+0.6%) +2706 B (+0.6%)
themes +3036 B (+0.4%) +781 B (+0.4%)
theme +3036 B (+0.6%) +781 B (+0.5%)
stats +3036 B (+0.4%) +781 B (+0.4%)
signup +3036 B (+0.7%) +781 B (+0.9%)
settings-writing +3036 B (+0.4%) +781 B (+0.4%)
settings-security +3036 B (+0.6%) +781 B (+0.6%)
settings-performance +3036 B (+0.5%) +781 B (+0.5%)
settings +3036 B (+0.4%) +781 B (+0.4%)
scan +3036 B (+0.4%) +781 B (+0.4%)
purchase-product +3036 B (+1.6%) +781 B (+1.5%)
posts-custom +3036 B (+0.5%) +781 B (+0.4%)
posts +3036 B (+0.5%) +781 B (+0.4%)
plugins +3036 B (+0.3%) +781 B (+0.3%)
plans +3036 B (+0.3%) +781 B (+0.3%)
people +3036 B (+0.5%) +781 B (+0.4%)
migrate +3036 B (+0.7%) +781 B (+0.6%)
media +3036 B (+0.2%) +781 B (+0.2%)
marketplace +3036 B (+0.4%) +781 B (+0.4%)
marketing +3036 B (+0.4%) +781 B (+0.4%)
jetpack-search +3036 B (+0.7%) +781 B (+0.6%)
jetpack-connect +3036 B (+0.3%) +781 B (+0.3%)
jetpack-cloud-settings +3036 B (+0.7%) +781 B (+0.6%)
jetpack-cloud-pricing +3036 B (+0.5%) +781 B (+0.5%)
jetpack-cloud-plugin-management +3036 B (+0.4%) +781 B (+0.3%)
jetpack-cloud-partner-portal +3036 B (+0.7%) +781 B (+0.6%)
jetpack-cloud-agency-dashboard +3036 B (+0.6%) +781 B (+0.5%)
hosting +3036 B (+0.5%) +781 B (+0.5%)
home +3036 B (+0.4%) +781 B (+0.4%)
help +3036 B (+0.4%) +781 B (+0.4%)
email +3036 B (+0.5%) +781 B (+0.4%)
earn +3036 B (+0.5%) +781 B (+0.5%)
checkout +3036 B (+0.2%) +781 B (+0.2%)
backup +3036 B (+0.3%) +781 B (+0.3%)
activity +3036 B (+0.4%) +781 B (+0.4%)
accept-invite +3036 B (+0.6%) +781 B (+0.8%)
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 (~781 bytes added 📈 [gzipped])
name parsed_size gzip_size
async-load-masterbar-cart-masterbar-cart-wrapper +3036 B (+1.8%) +781 B (+1.5%)
async-load-design-playground +3036 B (+0.2%) +781 B (+0.2%)
async-load-design-blocks +3036 B (+0.1%) +781 B (+0.1%)
async-load-design +3036 B (+0.2%) +781 B (+0.2%)
async-load-calypso-reader-sidebar +3036 B (+2.0%) +781 B (+1.9%)
async-load-calypso-post-editor-editor-media-modal +3036 B (+0.2%) +781 B (+0.2%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice +3036 B (+3.5%) +781 B (+3.5%)
async-load-calypso-my-sites-current-site-notice +3036 B (+2.7%) +781 B (+2.7%)
async-load-calypso-components-web-preview-component +3036 B (+0.5%) +781 B (+0.5%)
async-load-calypso-blocks-jitm-templates-sidebar-banner +3036 B (+3.1%) +781 B (+3.1%)
async-load-calypso-blocks-jitm-templates-notice +3036 B (+3.1%) +781 B (+3.0%)
async-load-calypso-blocks-jitm-templates-default +3036 B (+3.1%) +781 B (+3.1%)
async-load-calypso-blocks-inline-help-popover +3036 B (+0.5%) +781 B (+0.4%)
async-load-calypso-blocks-editor-checkout-modal +3036 B (+0.3%) +781 B (+0.3%)
async-load-automattic-help-center +3036 B (+0.5%) +781 B (+0.5%)
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.
This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7513450
Thank you @ciprianimike for including a screenshot in the description! This is really helpful for our translators.
Translation for this Pull Request has now been finished.
Can we change the copy on the modal from: If you cancel your plan, you will lose: to: If you cancel your plan, once it expires, you will lose:
Can we change the copy on the modal from: If you cancel your plan, you will lose: to: If you cancel your plan, once it expires, you will lose: @JanaMW27 done with ef40583
This PR modifies the release build for editing-toolkit
To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/pre-cancelation-modal on your sandbox.
To deploy your changes after merging, see the documentation: PCYsg-mMA-p2
I did a functional review of this, and it seems to work as expected now. I tested each of the plans on my test account. This included:
- Blogger
- Personal
- Starter
- Premium
- Pro
- Business
- Ecommerce

Some minor observations:
- On the
Bloggerplan, it looks like the check for site features works now. Nothing was shown except the confirmation for cancelling the plan:
- I am not sure if this is related to this PR: On plans which have the preview of the site showing in the cancellation dialogue (it looks like these are
Publicsites), the previews were all blurry for me. This happened each time I clicked on theRemovelink for a public sites.
- In the dialogues that have the
And more...option, would it make sense to link that to the plan features page? That way, the customer can easily find what those additional features are.
I did a functional review of this, and it seems to work as expected now. I tested each of the plans on my test account. This included:
- Blogger
- Personal
- Starter
- Premium
- Pro
- Business
- Ecommerce
Some minor observations:
- On the
Bloggerplan, it looks like the check for site features works now. Nothing was shown except the confirmation for cancelling the plan:![]()
- I am not sure if this is related to this PR: On plans which have the preview of the site showing in the cancellation dialogue (it looks like these are
Publicsites), the previews were all blurry for me. This happened each time I clicked on theRemovelink for a public sites.![]()
- In the dialogues that have the
And more...option, would it make sense to link that to the plan features page? That way, the customer can easily find what those additional features are.![]()
@JessBoctor there's a new PR since I corrupted this one (100 my bad). About your points:
- I'm working on a fix for the Blogger plan
- I'll check the blur image, in the meanwhile can you provide more details? Were you testing on your local environment? Were you using the sandbox?
- I suppose this can be postponed, I'd ask @JanaMW27 's opinion about this
Regarding point 3, the priority is to ship the modal, we can improve it once v1 is live
I think something strange happened with the latest update of this branch. Github is showing 512 commits and 2,082 files changed:
I believe this represents all the changes made to calypso in the last 3-4 weeks.
The latest commit has two parents (it's a merge, not a rebase), and its comments mention both "merge" and "rebase". If I check the lineage in tig, the two parents it is merging look to be two copies of the same series of commits, but those have different parents:

The parent of the left side is 254d863be7 from 2022-09-19, the parent of the right side is 94dcdfa51f from 2022-08-29.
I'm not yet sure if this represents an actual danger upon merging, or if it's only confusing github's change detection.
My current hypothesis is that the branch was rebased, and then the rebased commit was merged with the unrebased branch (instead of being force pushed). Remedition would be to force push the most recent commit on the rebased side as the branch. fd19d9e5071f9bbfe1046bf660565342cc23f8be
See: update/pre-cancelation-modal-2 #68222 for the results of this
I think something strange happened with the latest update of this branch. Github is showing 512 commits and 2,082 files changed:
I believe this represents all the changes made to calypso in the last 3-4 weeks.
The latest commit has two parents (it's a merge, not a rebase), and its comments mention both "merge" and "rebase". If I check the lineage in
tig, the two parents it is merging look to be two copies of the same series of commits, but those have different parents:
The parent of the left side is 254d863 from 2022-09-19, the parent of the right side is 94dcdfa from 2022-08-29.
I'm not yet sure if this represents an actual danger upon merging, or if it's only confusing github's change detection.
My current hypothesis is that the branch was rebased, and then the rebased commit was merged with the unrebased branch (instead of being force pushed). Remedition would be to force push the most recent commit on the rebased side as the branch. fd19d9e See:
update/pre-cancelation-modal-2#68222 for the results of this
@mreishus please refer to this PR https://github.com/Automattic/wp-calypso/pull/68067 as this was corrupted
@ciprianimike: if this is no longer being used, and you don't want to try @mreishus's fix above, then let's close it.