add new cancelation modal

[ciprianimike]

Pemise

The PR https://github.com/Automattic/wp-calypso/pull/67090 is corrupted, I opened this new and addressed the change requests.

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
• Verify the screenshot image is not blurry

Edge cases:

• Site isComingSoon or private: the modal won't show the site screenshot
• Mobile screen size: the modal won't show the site screenshot
• If the user are cancelling a Jetpack, Professional emails plan: the modal won't show up
• If the user are cancelling a subscription (auto renew on) within the refund window, with a domain, the modal informs them they are going to love the domain and the traffic will be redirected to the related WPCom URL.

Before

After

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

Issue

Related to 1039-gh-Automattic/martech

[github-actions[bot]]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-46051

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-46051&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~815 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper      +3656 B  (+0.1%)     +815 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~4210 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
site-purchases                      +14742 B  (+1.0%)    +4210 B  (+1.1%)
purchases                           +14742 B  (+0.9%)    +4210 B  (+1.0%)
domains                             +11239 B  (+0.7%)    +3214 B  (+0.8%)
themes                               +3656 B  (+0.5%)     +813 B  (+0.4%)
theme                                +3656 B  (+0.7%)     +813 B  (+0.5%)
stats                                +3656 B  (+0.5%)     +813 B  (+0.4%)
signup                               +3656 B  (+0.9%)     +813 B  (+0.9%)
settings-writing                     +3656 B  (+0.5%)     +813 B  (+0.4%)
settings-security                    +3656 B  (+0.8%)     +813 B  (+0.6%)
settings-performance                 +3656 B  (+0.6%)     +813 B  (+0.5%)
settings                             +3656 B  (+0.5%)     +813 B  (+0.4%)
scan                                 +3656 B  (+0.5%)     +813 B  (+0.4%)
purchase-product                     +3656 B  (+1.9%)     +813 B  (+1.6%)
posts-custom                         +3656 B  (+0.6%)     +813 B  (+0.4%)
posts                                +3656 B  (+0.6%)     +813 B  (+0.4%)
plugins                              +3656 B  (+0.2%)     +813 B  (+0.1%)
plans                                +3656 B  (+0.4%)     +813 B  (+0.3%)
people                               +3656 B  (+0.6%)     +813 B  (+0.5%)
migrate                              +3656 B  (+0.9%)     +813 B  (+0.6%)
media                                +3656 B  (+0.2%)     +813 B  (+0.2%)
marketplace                          +3656 B  (+0.5%)     +813 B  (+0.4%)
marketing                            +3656 B  (+0.5%)     +813 B  (+0.4%)
jetpack-search                       +3656 B  (+0.8%)     +813 B  (+0.6%)
jetpack-connect                      +3656 B  (+0.3%)     +813 B  (+0.3%)
jetpack-cloud-settings               +3656 B  (+0.8%)     +813 B  (+0.6%)
jetpack-cloud-pricing                +3656 B  (+0.6%)     +813 B  (+0.5%)
jetpack-cloud-plugin-management      +3656 B  (+0.5%)     +813 B  (+0.4%)
jetpack-cloud-partner-portal         +3656 B  (+0.9%)     +813 B  (+0.6%)
jetpack-cloud-agency-dashboard       +3656 B  (+0.7%)     +813 B  (+0.6%)
hosting                              +3656 B  (+0.6%)     +813 B  (+0.5%)
home                                 +3656 B  (+0.4%)     +813 B  (+0.3%)
help                                 +3656 B  (+0.5%)     +813 B  (+0.4%)
email                                +3656 B  (+0.5%)     +813 B  (+0.4%)
earn                                 +3656 B  (+0.7%)     +813 B  (+0.5%)
checkout                             +3656 B  (+0.2%)     +813 B  (+0.2%)
backup                               +3656 B  (+0.4%)     +813 B  (+0.3%)
activity                             +3656 B  (+0.5%)     +813 B  (+0.4%)
accept-invite                        +3656 B  (+0.8%)     +813 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 (~813 bytes added 📈 [gzipped])

name                                                              parsed_size           gzip_size
async-load-masterbar-cart-masterbar-cart-wrapper                      +3656 B  (+2.1%)     +813 B  (+1.6%)
async-load-design-playground                                          +3656 B  (+0.2%)     +813 B  (+0.2%)
async-load-design-blocks                                              +3656 B  (+0.2%)     +813 B  (+0.1%)
async-load-design                                                     +3656 B  (+0.2%)     +813 B  (+0.2%)
async-load-calypso-reader-sidebar                                     +3656 B  (+2.4%)     +813 B  (+2.0%)
async-load-calypso-post-editor-editor-media-modal                     +3656 B  (+0.2%)     +813 B  (+0.2%)
async-load-calypso-my-sites-current-site-stale-cart-items-notice      +3656 B  (+4.2%)     +813 B  (+3.7%)
async-load-calypso-my-sites-current-site-notice                       +3656 B  (+3.3%)     +813 B  (+2.7%)
async-load-calypso-components-web-preview-component                   +3656 B  (+0.6%)     +813 B  (+0.5%)
async-load-calypso-blocks-jitm-templates-sidebar-banner               +3656 B  (+3.8%)     +813 B  (+3.1%)
async-load-calypso-blocks-jitm-templates-notice                       +3656 B  (+3.8%)     +813 B  (+3.1%)
async-load-calypso-blocks-jitm-templates-default                      +3656 B  (+3.8%)     +813 B  (+3.1%)
async-load-calypso-blocks-inline-help-popover                         +3656 B  (+0.5%)     +813 B  (+0.4%)
async-load-calypso-blocks-editor-checkout-modal                       +3656 B  (+0.4%)     +813 B  (+0.3%)
async-load-automattic-help-center                                     +3656 B  (+0.6%)     +813 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]

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-new on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[ciprianimike]

The screenshot is blurry or me if width and height props are not provided. Providing width and height resolves the problem.

@dzver I pushed a fix for this.

[DavidRothstein]

I did a quick test and saw that most of the issues from my comment at https://github.com/Automattic/wp-calypso/pull/67090#pullrequestreview-1105154046 are still present (in particular the first, "We seem to have a double confirmation", and the third, "This is being applied to Jetpack too")?

Also noticed that the messaging seems backwards between refundable and non-refundable cancellations:

1. I saw this when cancelling a refundable subscription (where it's actually going to be removed immediately, not "once it expires"):

2. And this when cancelling a non-refundable subscription (which is actually going to just turn off auto-renew, not remove anything right away):

Seems like it should be the other way around.

Also in the above screenshots, I thought "Best in-class hosting" wasn't supposed to be there anymore (since they aren't losing their hosting)?

And in the first screenshot, "custom domain as primary"... I saw that message even though I don't have a custom domain. Also, even if I did have one, the wording seems pretty confusing to me.

[JessBoctor]

👋 From my initial review

It looks like the issues I raised have all been resolved.

1. The Blogger plan now has a feature description:

2. The images for the public sites are no longer blurry:

For posterity, I was testing on my 14" MBP A2442. MacOS version 12.5 and Chrome version 105.0.5195.125. Display resolution is set to Default settings and the presets to Apple XDR Display (P3-1600 nits). I used an A8c sandbox with local Calypso build for testing.

3. My suggestion about the link for And many more was address by @JanaMW27's comment.

[spraveenitpro]

Some additional functional testing:

For personal plan:

For premium plan:

For business plan:

[JanaMW27]

We need the wording: If you cancel your plan, once it expires, you will lose: In all the modals but the one in the refund window the: once it expires, is important

[dzver]

I just want to confirm, is this step supposed to be visible as a second step after clicking the Cancel subscription and refund? (the PR needs rebase, these buttons are now with a different color and copy)

CC @JanaMW27

[ciprianimike]

I just want to confirm, is this step supposed to be visible as a second step after clicking the Cancel subscription and refund? (the PR needs rebase, these buttons are now with a different color and copy)

CC @JanaMW27

@dzver that step will be skipped, I discussed it yesterday with @JanaMW27 and worked on the fix

[JanaMW27]

After some scope and edge cases considerations, we have decided to keep this screen ONLY for users within the refund window. The rest of the users should ONLY see the modal and not this screen.

[ciprianimike]

I did a quick test and saw that most of the issues from my comment at #67090 (review) are still present (in particular the first, "We seem to have a double confirmation", and the third, "This is being applied to Jetpack too")?

Also noticed that the messaging seems backwards between refundable and non-refundable cancellations:

1. I saw this when cancelling a refundable subscription (where it's actually going to be removed immediately, not "once it expires"):

2. And this when cancelling a non-refundable subscription (which is actually going to just turn off auto-renew, not remove anything right away):

Seems like it should be the other way around.

Also in the above screenshots, I thought "Best in-class hosting" wasn't supposed to be there anymore (since they aren't losing their hosting)?

And in the first screenshot, "custom domain as primary"... I saw that message even though I don't have a custom domain. Also, even if I did have one, the wording seems pretty confusing to me.

@DavidRothstein I updated the PR, the extra step will be present as per the comment: https://github.com/Automattic/wp-calypso/pull/68067#issuecomment-1262036285", I updated the checks for the site having primary domain and removed the hosting. I tested Jetpack subscriptions via jurassic-ninja and it should be fine.

[DavidRothstein]

I did another round of brief testing.

I tested Jetpack subscriptions via jurassic-ninja and it should be fine.

For me, the modal is still appearing for Jetpack. Note that you do need to purchase a Jetpack plan to see this (or I think they're calling it "bundle" now) -- for example Jetpack Security, as shown in my original screenshot. A Jetpack product does not have the problem.

"once it expires"

I'm not seeing this text appear at all anymore (even when cancelling a nonrefundable subscription, where it's supposed to appear)?

the extra step will be present as per the comment: https://github.com/Automattic/wp-calypso/pull/68067#issuecomment-1262036285

The behavior I see now doesn't seem to match that comment -- the extra step is present for me in both cases (not just the refundable case)?

Anyway, I guess I can see the logic of having a two-step confirmation for now (maybe even in both cases). The two steps do provide different information. However, there is also a fair amount of duplicate information if you just keep the second screen exactly as is (for example, the "Plan Features" link on the second screen completely duplicates the first screen). And the biggest thing that feels extremely disjointed is jumping in and out of the modal. You click to cancel, see a modal, click to continue, jump out of the modal, click to continue, and now go into a different kind of modal (full-screen-style) where you get a survey, etc... Couldn't we have both steps of the confirmation inside the modal instead?

And in the first screenshot, "custom domain as primary"... the wording seems pretty confusing to me.

It still seems confusing to me. The full context here being:

If you cancel your plan, you will lose: -Your custom domain as primary. Your traffic will be redirected to example.wordpress.com

I don't think most people will understand what that means. Whereas the current wording that this is replacing (https://github.com/Automattic/wp-calypso/pull/39909 shows an almost-accurate screenshot) uses more basic terminology. Couldn't we use something more like that? Perhaps:

If you cancel your plan, you will lose: -The ability to have example.com as your primary site address. example.wordpress.com will be the new address that people see when they visit your site.

It's longer, but this is a complicated and important concept, and it should be OK to explain it using enough words to make it clear.

[ciprianimike]

For me, the modal is still appearing for Jetpack. Note that you do need to purchase a Jetpack plan to see this (or I think they're calling it "bundle" now) -- for example Jetpack Security, as shown in my original screenshot. A Jetpack product does not have the problem.

I pushed a fix, before only Jetpack products were excluded, now alsp Jetpack plans.

[ciprianimike]

"once it expires"

I'm not seeing this text appear at all anymore (even when cancelling a nonrefundable subscription, where it's supposed to appear)?

the extra step will be present as per the comment: #68067 (comment)

The behavior I see now doesn't seem to match that comment -- the extra step is present for me in both cases (not just the refundable case)?

This text should be now visible only for all modals but subscriptions in the refund window.

[ciprianimike]

And in the first screenshot, "custom domain as primary"... the wording seems pretty confusing to me.

It still seems confusing to me. The full context here being:

If you cancel your plan, you will lose: -Your custom domain as primary. Your traffic will be redirected to example.wordpress.com

I don't think most people will understand what that means. Whereas the current wording that this is replacing (#39909 shows an almost-accurate screenshot) uses more basic terminology. Couldn't we use something more like that? Perhaps:

If you cancel your plan, you will lose: -The ability to have example.com as your primary site address. example.wordpress.com will be the new address that people see when they visit your site.

It's longer, but this is a complicated and important concept, and it should be OK to explain it using enough words to make it clear.

The wording has been updated, but the longer text require some CSS tuning for non very short domains and wpcom urls.

[JanaMW27]

Could we force it to not truncate the domain name?

Sent from my iPhone

On 3 Oct 2022, at 16:30, Michele Cipriani @.***> wrote:

 @ciprianimike commented on this pull request.

In client/me/purchases/remove-plan-dialog/index.tsx:

• wpcomURL, +}: RemovePlanDialogProps ) => {

• const translate = useTranslate();
• const siteName = site.name ?? '';
• /**
• • Istantiate site's plan variables.
• */
• const productSlug = site.plan?.product_slug;
• const planLabel = site.plan?.product_name_short;
• const isComingSoon = site.is_coming_soon;
• const isPrivate = site.is_private;
• const launchedStatus = site.launch_status === 'launched' ? true : false;
• const shouldUseSiteThumbnail =

• isComingSoon === false && isPrivate === false && launchedStatus === true;
  

• const subTitle = ! isRefundable

@JanaMW27 @DavidRothstein This is how it looks cutting the domain names

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[ciprianimike]

I worked on the CSS having keeping the full domain name and truncating the wpcom URL only if it take more than a line.

[ciprianimike]

@DavidRothstein all your feedbacks should be addressed, could you please review? and thanks for your big patience

[ciprianimike]

I tried it out briefly, and the "Cancel plan" link now seems to always be removing the plan immediately (even when outside the refund window and auto-renew is on, which is where it previously just turned auto-renew off).

Otherwise looked pretty good to me, although the double-confirmation with modal for step 1 and non-modal for step 2 is still there...

The domain changes look good now, but I did see this layout issue (which I hadn't seen before - it may be new):

I'll be AFK for the next day or so, so someone else may have to pick up any reviews.

These feedbacks are clear, I'm testing and fixing it

[ciprianimike]

CSS issues has been fixed

[ciprianimike]

@DavidRothstein all your feedback should be arranged, please check this PR once again

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7568066

Thank you @ciprianimike for including a screenshot in the description! This is really helpful for our translators.

[DavidRothstein]

I tested again and am still seeing some of the previously-mentioned problems, in particular:

• For a non-refundable subscription with auto-renew on, going through the cancellation flow still results in the plan being removed rather than auto-renew being turned off.
• Although the intro paragraph is now displaying in the modal (that part is fixed) I'm seeing the wrong message in the case of a removable subscription: "If you cancel your plan, once it expires, you will lose" rather than "If you remove your plan, you will lose". It looks like issue I mentioned before (where the translated string is not being assigned to the subTitle variable) was not fixed.

the jumping in and out of different modals while cancelling still seems disjointed to me.

I'm progressing on the work for this case: pebzTe-f6-p2 it will be covered by a different PR and this should be the only disjointed case. For all the other cases the Cancellation Modal shows the survey form without disjunctions.

It's currently happening for any plan cancellation within the refund window (the link you provided is for the case where there's a plan and domain, which is pretty common in its own right, but is not the only case).

Here's a video showing the behavior for cancelling just a plan (no domain involved):

https://user-images.githubusercontent.com/235183/195505670-4c7ad85a-3722-4e32-bdad-5efd7cdc2325.mp4

What is the rationale for fixing that flow as a followup, rather than launching this with the intended experience in place to begin with? If the goal is to get something out sooner, would it be better to just release the modal for the non-refundable case only to start (and then hold off on the refundable case until it's actually ready)?

Regarding the non-refundable case, this pull request is indeed replacing the old screen with the new modal, which is good. Comparing them below, I do see two things that have gone missing that may be important:

1. The "Ask a Happiness Engineer" link -- do we really want to remove that? I would guess it is useful to give people an easy way to contact us if they're thinking of cancelling. And it seems like it would be pretty easy to put that in the modal.
2. The "subscription will be removed on October 12, 2023" text, although not critical, seems like it provides useful information that allows the person to understand what will happen. Do we want to consider changing the text in the modal to something like: "If you cancel your plan, once it expires (on October 12, 2023) you will lose"?

Old cancel confirmation:

New cancel confirmation:

[michaeldcain]

This is being broken down into smaller diffs per this post: pebzTe-oH-p2

I'm going to make this a draft PR so that we'll get pinged if it ever gets changed back.

[a8ci18n]

Translation for this Pull Request has now been finished.