wp-calypso icon indicating copy to clipboard operation
wp-calypso copied to clipboard

New purchase cancelation dialog

Open ciprianimike opened this issue 3 years ago • 10 comments

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

before

After

https://user-images.githubusercontent.com/5706607/188671098-defa794a-7b57-435c-839c-1d31c1eef619.mp4

Issue

Related to 1039-gh-Automattic/martech

ciprianimike avatar Aug 29 '22 10:08 ciprianimike

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.

matticbot avatar Aug 29 '22 10:08 matticbot

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.

a8ci18n avatar Sep 06 '22 14:09 a8ci18n

Translation for this Pull Request has now been finished.

a8ci18n avatar Sep 08 '22 12:09 a8ci18n

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 avatar Sep 09 '22 10:09 JanaMW27

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

ciprianimike avatar Sep 09 '22 16:09 ciprianimike

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

matticbot avatar Sep 20 '22 04:09 matticbot

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

GH67090-Remove-Plan

Some minor observations:

  1. On the Blogger plan, it looks like the check for site features works now. Nothing was shown except the confirmation for cancelling the plan:
GH67090-Blogger-cancel
  1. 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 Public sites), the previews were all blurry for me. This happened each time I clicked on the Remove link for a public sites.
GH67090-eCommerce-Preview-Cancel
  1. 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.
GH67090-Pro-Cancel-MoreLink

JessBoctor avatar Sep 21 '22 17:09 JessBoctor

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

GH67090-Remove-Plan GH67090-Remove-Plan

Some minor observations:

  1. On the Blogger plan, it looks like the check for site features works now. Nothing was shown except the confirmation for cancelling the plan:
GH67090-Blogger-cancel
  1. 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 Public sites), the previews were all blurry for me. This happened each time I clicked on the Remove link for a public sites.
GH67090-eCommerce-Preview-Cancel
  1. 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.
GH67090-Pro-Cancel-MoreLink

@JessBoctor there's a new PR since I corrupted this one (100 my bad). About your points:

  1. I'm working on a fix for the Blogger plan
  2. 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?
  3. I suppose this can be postponed, I'd ask @JanaMW27 's opinion about this

ciprianimike avatar Sep 22 '22 12:09 ciprianimike

Regarding point 3, the priority is to ship the modal, we can improve it once v1 is live

JanaMW27 avatar Sep 22 '22 14:09 JanaMW27

I think something strange happened with the latest update of this branch. Github is showing 512 commits and 2,082 files changed: 2022-09-23_11-15 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:

2022-09-23_11-24

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

mreishus avatar Sep 23 '22 16:09 mreishus

I think something strange happened with the latest update of this branch. Github is showing 512 commits and 2,082 files changed: 2022-09-23_11-15 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:

2022-09-23_11-24

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 avatar Sep 23 '22 16:09 ciprianimike

@ciprianimike: if this is no longer being used, and you don't want to try @mreishus's fix above, then let's close it.

michaeldcain avatar Sep 26 '22 15:09 michaeldcain