New purchase cancelation dialog #67090

ciprianimike · 2022-08-29T10:15:20Z

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.

Before

After

Pmtriv.mp4

Issue

Related to 1039-gh-Automattic/martech

github-actions · 2022-08-29T10:16:04Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-08-29T10:16:17Z

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.

ddc22

Approach looks good and I left some comments. Also add a screenshot if possible 👍

ddc22 · 2022-08-29T10:29:19Z

client/me/purchases/remove-purchase/index.jsx

@@ -360,6 +388,7 @@ class RemovePurchase extends Component {
 					<Gridicon className="card__link-indicator" icon="trash" />
 				</Wrapper>
 				{ this.shouldShowNonPrimaryDomainWarning() && this.renderNonPrimaryDomainWarningDialog() }
+				{ this.shouldShowPlanWarning() && this.renderPlanWarningDialog() }


I do not normally with this pattern of multiple render functions inside a component, but that seems to be the current approach of this file.
Personally I like to see a declarative component tree with lot's of ternaries and conditional logic which is much more readable at a glance. But YMMV.

this was fixed

ddc22 · 2022-08-29T10:39:05Z

client/me/purchases/remove-plan-dialog/index.jsx

+
+import './style.scss';
+
+class RemovePlanDialog extends Component {


IMO it's better to use function components instead of class components. For one it's less code/boilerplate all round and its much simpler to read.

component refactored in the file https://github.com/Automattic/wp-calypso/pull/67090/files#diff-22f6c96a70e669c1ee86915b052fe607759a7d300568afe8a92d9646c37860d0

ddc22 · 2022-08-29T10:45:36Z

client/me/purchases/remove-plan-dialog/style.scss

+.non-primary-domain-dialog {
+	max-width: 500px;
+}


There is a prop called isFullScreen maybe you can utilize that prop here.

wp-calypso/packages/components/src/dialog/index.tsx

Line 17 in e9d2f79

isFullScreen?: boolean;

Also the guide to style the dialog component can be found in the docs.
https://wpcalypso.wordpress.com/devdocs/packages/components/src/dialog/README.md?term=Dialog

a8ci18n · 2022-09-06T14:18:02Z

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.

DavidRothstein

I'm not sure how far along this is, but I tried it and the main thing I noticed is that I couldn't trigger it in the way I expected to:

Purchased a plan
Visited the purchase management page
Clicked "Cancel Subscription and Refund" to remove the plan
Didn't see the dialog anywhere during the process of removing the plan

In order to see it, I needed a plan that was no longer refundable and that already had auto-renew disabled (in other words, was already "cancelled" in some sense). Then I saw the dialog when I went to completely remove the subscription afterwards. Is that expected?

Also noticed that when I tried to remove a Pro plan, the feature list is missing:

I assume we should add a feature list for Pro and Starter (since there are plenty of those around that people might cancel), but either way, there should also be a fallback where if an unrecognized plan is being cancelled, the "If you cancel your plan, you will lose" sentence doesn't display.

DavidRothstein · 2022-09-06T21:31:31Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+	const freeDomainFirstYear = String( translate( 'Your free domain for the first year' ) );
+	const freeDomain = String(
+		translate( 'Your free domain www.%(slug)s', {
+			args: { slug: domainSlug },


I don't really understand the above wording.... We don't take away anyone's domain when they cancel the plan. We might subtract its cost from their refund (if the plan is within the refund window and the domain isn't) but that would be in the refund flow, which is different than the main flow you're in here.

domains labels and logic were removed in the design vTj2aknM6tRUQndWtOcURT-fi-445%3A10488

DavidRothstein · 2022-09-06T21:32:04Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+		} )
+	);
+	const bestInClassHosting = String( translate( 'Best-in-class hosting' ) );
+	const addFreeSite = String( translate( 'An add-free site' ) );


Should be "ad-free"

this was fixed, the copy structure refatore, see

I'm not sure how far along this is, but I tried it and the main thing I noticed is that I couldn't trigger it in the way I expected to:

Purchased a plan

Visited the purchase management page

Clicked "Cancel Subscription and Refund" to remove the plan

Didn't see the dialog anywhere during the process of removing the plan

In order to see it, I needed a plan that was no longer refundable and that already had auto-renew disabled (in other words, was already "cancelled" in some sense). Then I saw the dialog when I went to completely remove the subscription afterwards. Is that expected?

Also noticed that when I tried to remove a Pro plan, the feature list is missing:

I assume we should add a feature list for Pro and Starter (since there are plenty of those around that people might cancel), but either way, there should also be a fallback where if an unrecognized plan is being cancelled, the "If you cancel your plan, you will lose" sentence doesn't display.

The logic changed, the modal now support subscription and you should be able to access the modal consistently.
PRO and Starte plans were added.
Copy is updated and moved to https://github.com/Automattic/wp-calypso/pull/67090/files#diff-8f9fb14a44111dd55e67d9462573bf9233849ac1d9a77bf65b56e1f6ce22d384

DavidRothstein · 2022-09-06T21:32:22Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+	const collectPayments = String( translate( 'The ability to collect payments' ) );
+	const emailCustomerSupport = String( translate( 'Unlimited customer support via email' ) );
+	const liveChat = String( translate( 'Access to live chat support' ) );
+	const earnAndRevenue = String( translate( 'The ability to earn and revenue' ) );


I assume that's supposed to be "earn ad revenue"?

DavidRothstein · 2022-09-06T21:32:36Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+	const analyticsIntegration = String( translate( 'Google Analytics integration' ) );
+	const accessPlugins = String( translate( 'Access to more than 50,000 plugins' ) );
+	const seoTools = String( translate( 'Advanced SEO tools' ) );
+	const automatedBackups = String( translate( 'Automated site backupsand one-click restore' ) );


Typo, "backupsand"

DavidRothstein · 2022-09-06T21:32:52Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+	const accessPlugins = String( translate( 'Access to more than 50,000 plugins' ) );
+	const seoTools = String( translate( 'Advanced SEO tools' ) );
+	const automatedBackups = String( translate( 'Automated site backupsand one-click restore' ) );
+	const sftpAndDatabase = String( translate( 'SFTP and Database access' ) );


I'm not sure "Database" should be capitalized there.

DavidRothstein · 2022-09-06T21:34:38Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+			automatedBackups,
+			sftpAndDatabase,
+			bestInClassHosting,
+			liveChat,


Does liveChat belong here? It's not listed for the other monthly plans, and seems to contradict https://wordpress.com/pricing/.

Features were updated in the design vTj2aknM6tRUQndWtOcURT-fi-445%3A10488

DavidRothstein · 2022-09-06T21:36:03Z

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

+			action: 'removePlanAndAllSubscriptions',
+			label: translate( 'Cancel my plan', {
+				comment:
+					'This button removes the active plan and all active Marketplace subscriptions on the site',


I am not sure what this has to do with marketplace subscriptions or removePlanAndAllSubscriptions. I think it just removes the plan and nothing else.

this was updated

I'm still seeing the reference to "marketplace subscription" in the above comment, though.

Yep, I'm also seeing it. @ciprianimike maybe the commit isn't pushed?
Either way, I don't think we need this translator comment, since "Cancel my plan" has already been translated in other places since 2 years ago: https://translate.wordpress.com/projects/wpcom/-all-translated/282389/ . So let's remove this comment entirely :)

DavidRothstein · 2022-09-06T21:37:15Z

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

+	const shouldUseSiteThumbnail =
+		isComingSoon === false && isPrivate === false && launchedStatus === true;
+	const withinFirstYear =
+		site.options.created_at !== undefined ? dateWithinLastYear( site.options.created_at ) : false;


I am not sure what the site creation date has to do with anything.... Are you actually trying to figure out if their custom domain is more than a year old, maybe?

This part is deprecated as the design changed and there are no more domains involved.

DavidRothstein · 2022-09-06T21:37:44Z

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

+		isComingSoon === false && isPrivate === false && launchedStatus === true;
+	const withinFirstYear =
+		site.options.created_at !== undefined ? dateWithinLastYear( site.options.created_at ) : false;
+	const hasDomain = site.URL !== undefined && site.URL === site.options.unmapped_url ? false : true;


This seems to be checking whether the site has a custom primary domain? Doesn't seem like what you want here. My guess is you want to know something more along the lines of whether they used their domain credit and still have the domain they used it on.

This part is deprecated as the design changed and there are no more domains involved.

DavidRothstein · 2022-09-06T21:39:14Z

client/me/purchases/remove-purchase/index.jsx

@@ -211,6 +222,23 @@ class RemovePurchase extends Component {
 		);
 	}

+	shouldShowPlanWarning() {
+		const { isAtomicSite, purchase } = this.props;
+		return isPlan( purchase ) && ! isAtomicSite;


Why not for Atomic sites?

This was fixed

ddc22

I did a quick run through the PR. I will have a look again but left some feedback.

ddc22 · 2022-09-06T15:54:16Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

+	const bestInClassHosting = String( translate( 'Best-in-class hosting' ) );
+	const addFreeSite = String( translate( 'An add-free site' ) );
+	const collectPayments = String( translate( 'The ability to collect payments' ) );
+	const emailCustomerSupport = String( translate( 'Unlimited customer support via email' ) );
+	const liveChat = String( translate( 'Access to live chat support' ) );
+	const earnAndRevenue = String( translate( 'The ability to earn and revenue' ) );
+	const premiumThemes = String( translate( 'Access to premium themes' ) );
+	const analyticsIntegration = String( translate( 'Google Analytics integration' ) );
+	const accessPlugins = String( translate( 'Access to more than 50,000 plugins' ) );
+	const seoTools = String( translate( 'Advanced SEO tools' ) );
+	const automatedBackups = String( translate( 'Automated site backupsand one-click restore' ) );
+	const sftpAndDatabase = String( translate( 'SFTP and Database access' ) );
+	const acceptPayments = String( translate( 'Accept payments in 60+ countries' ) );
+	const shippingCarriers = String( translate( 'Integration with top shipping carriers' ) );
+	const premiumDesign = String(
+		translate( 'Premium design options customized for online stores' )
+	);
+	const more = String( translate( 'and more' ) );


Why do we need to cast this result to string?

I think the reason is that translate() can be used to create interpolated React components, so its return type is TranslateResult (this is similar to ReactNode). This function returns string[], which is a sensible return value, since all of the translate() calls above will in fact only return strings, but TypeScript doesn't know that. The cast forces the results to be strings in case they are not. We do this in a lot of places.

wp-calypso/client/my-sites/checkout/modal/index.tsx

Line 73 in b472d87

title={ String( translate( 'Checkout modal' ) ) }

I learned recently that there's another way to do this which might be more semantic. The translate() method accepts an options object as its second parameter and that object can have the textOnly property. If set, TypeScript will know that the function will return a string.

wp-calypso/client/components/jetpack/profile-dropdown/index.tsx

Line 65 in b472d87

alt={ translate( 'My Profile', { textOnly: true } ) }

So this line could be:

const more = translate( 'and more', { textOnly: true } );

But can't we return TranslateResult[] and avoid all the confusion? @sirbrillig

Certainly, if you like. Sometimes that's the more useful fix.

I leave that judgment call to you @ciprianimike :) I am ok either way too 👍

@jdc91 I see this approach used all over the codebase so I would keep it as it is for consistency, this is the reason why I used it

ddc22 · 2022-09-06T16:11:34Z

client/me/purchases/remove-plan-dialog/get-plan-features.tsx

@@ -0,0 +1,257 @@
+import {


Have you thought about a different way to do this possibly by maintaining a matrix (2d array). So that these feature's are easier to maintain and are more readable?

//Plan Slugs const BUSINESS_PLAN = "BUSINESS_PLAN"; const PREMIUM_PLAN = "PREMIUM_PLAN"; ... //Periods const MONTHLY = "MONTHLY" const YEARLY = "YEARLY" const planMatrix = { "BUSINESS_PLAN" : { "MONTHLY" : [ bestInClassHosting, addFreeSite, collectPayments, emailCustomerSupport ], "YEARLY" : [ ... ], }, "PREMIUM_PLAN" : { "MONTHLY" : [ ... ], "YEARLY" : [ ... ], }, ... }

And you can do a final processing on the resulting array to figure out the domain related stuff. :)
This can possibly reduce some repetitive logic as well.

@ciprianimike: Can most of the typos and maintenance concerns be addressed by using and/or extending @automattic/calypso-products/plans-list and adding something along the lines of getCancellationFlowFeatures()?

The cancellation flow feature list is now integrate in the @automattic/calypso-products/plans-list as requested

ddc22 · 2022-09-06T16:17:02Z

client/me/purchases/remove-plan-dialog/style.scss

+$modal-breakpoint-tablet: 1070px;
+$modal-breakpoint-mobile: 480px;
+
+.dialog__content.remove-plan-dialog {


All of the code in this sass file can be moved under this class there is no need to repeat this class on 17 and 132 and 138 can also be brought within this class to maintain a clear inheritance structure.

This request was addressed

ddc22 · 2022-09-06T16:35:44Z

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

+							align="left"
+						/>
+						<p>{ translate( 'If you cancel your plan, you will lose:' ) }</p>
+						<FeaturesList />


nit : this can just be shown inline :)

michaeldcain · 2022-09-08T03:27:02Z

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

+	 */
+	const buttons = [
+		{
+			action: 'cancel',


A bit of a nitpick, but does this action need to be "cancel"? Since the primary action here is to "cancel my plan", it can be misleading.

michaeldcain · 2022-09-08T03:36:22Z

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

+				<ul className="remove-plan-dialog__list-plan-features">
+					{ planFeatures.map( ( feature, index ) => {
+						return (
+							<li key={ index }>


It might be fine here, but in general, using index as a key is an anti-pattern.

Good find. In this case feature should be a unique string so we can probably use that instead!

michaeldcain · 2022-09-08T03:43:03Z

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

+			buttons={ buttons }
+			className={ dialogClassName }
+			isVisible={ isDialogVisible }
+			onClose={ closeDialog }


It would be a good idea to include some Tracks events with any user actions in this dialog.

Good catch! Yes please, let's add Tracks events so we can measure user interaction in this dialog 🙏

michaeldcain · 2022-09-08T03:48:04Z

client/me/purchases/remove-purchase/index.jsx

@@ -352,16 +380,29 @@ class RemovePurchase extends Component {

 		const wrapperClassName = classNames( 'remove-purchase__card', className );
 		const Wrapper = useVerticalNavItem ? VerticalNavItem : CompactCard;
+		const getWarningDialog = () => {
+			if ( this.shouldShowPlanWarning() ) {
+				return this.renderPlanWarningDialog();


Does the plan warning dialog cover the same information in the non-primary domain warning dialog below? Since you're overriding the dialog, I think we need to let users with the hasNonPrimaryDomainsFlag flag and a custom domain know that their site will be redirected to the simple site address on removal.

@JanaMW27 can you take a look at this case?

Yes, here is the solution: pebzTe-gw-p2

* remove feature flag guard from WP.org plugin search * Revert "remove feature flag guard from WP.org plugin search" This reverts commit 5ed4719. * update `marketplace-jetpack-plugin-search` to true on all environments

…unt on social login (#67057)

a8ci18n · 2022-09-08T12:30:11Z

Translation for this Pull Request has now been finished.

…eeding an update (#67525) * Don't update up-to-date plugins * Don't update up-to-date plugins when retrying and on clicking on update Co-authored-by: Yashwin <[email protected]>

…67561) Co-authored-by: Daniel Rodriguez <[email protected]>

* allow the Add Subscribers screen to be revisited * fix typo * change styling to match mockup * simplify styles * simplify dynamic classnames * simplify dynamic classnames * use goToStep instead of actionUrl

- remove deprecated spec

* Correct uses of stylelint disable When using "stylelint-disable-line" with no scope, autofix does not work. As a result, we MUST scope every disable line in order for autofix to work on the rest of the file. * Replace standalone 'stylelint-disable' with 'stylelint-disable-line' * Fix uses of disable-next-line

…wp-calypso into update/pre-cancelation-modal Rebase trunk branch

matticbot · 2022-09-20T04:47:23Z

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

JessBoctor · 2022-09-21T17:44:06Z

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 Blogger plan, 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 Public sites), the previews were all blurry for me. This happened each time I clicked on the Remove link 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.

ciprianimike · 2022-09-22T12:23:07Z

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 Blogger plan, 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 Public sites), the previews were all blurry for me. This happened each time I clicked on the Remove link 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

JanaMW27 · 2022-09-22T14:01:01Z

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

mreishus · 2022-09-23T16:25:43Z

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

ciprianimike · 2022-09-23T16:51:34Z

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 #68067 as this was corrupted

michaeldcain · 2022-09-26T15:53:14Z

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

ciprianimike added the DO NOT MERGE label Aug 29, 2022

ciprianimike requested review from taggon and ddc22 August 29, 2022 10:15

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 29, 2022

ddc22 reviewed Aug 29, 2022

View reviewed changes

ciprianimike added the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Sep 6, 2022

ciprianimike marked this pull request as ready for review September 6, 2022 15:11

ciprianimike requested a review from a team as a code owner September 6, 2022 15:11

DavidRothstein reviewed Sep 6, 2022

View reviewed changes

ddc22 suggested changes Sep 7, 2022

View reviewed changes

michaeldcain reviewed Sep 8, 2022

View reviewed changes

ciprianimike removed the [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging label Sep 8, 2022

gcsecsey and others added 2 commits September 8, 2022 14:20

Remove feature flag guard from WP.org plugin search (#67510)

97e188e

* remove feature flag guard from WP.org plugin search * Revert "remove feature flag guard from WP.org plugin search" This reverts commit 5ed4719. * update `marketplace-jetpack-plugin-search` to true on all environments

Social Auth: Update TOS message to remove mention of creating an acco…

d5966bf

…unt on social login (#67057)

andrii-lysenko and others added 3 commits September 8, 2022 15:46

Update: refactor product store to share context (#67513)

66cc24f

Jetpack Cloud: Make the "Update Plugins" button only update plugins n…

b2e699d

…eeding an update (#67525) * Don't update up-to-date plugins * Don't update up-to-date plugins when retrying and on clicking on update Co-authored-by: Yashwin <[email protected]>

Add launchpad site preview dynamic height + lint (#67471)

4c6a3e4

ciprianimike removed the request for review from taggon September 8, 2022 16:25

ciprianimike and others added 5 commits September 8, 2022 18:45

fix plans typos

3385d77

Added hasCredentials condition in addition to testCredentialsResult (#…

ac2e859

…67561) Co-authored-by: Daniel Rodriguez <[email protected]>

Launchpad: Allow users to revisit completed steps (#67405)

c02d6ab

* allow the Add Subscribers screen to be revisited * fix typo * change styling to match mockup * simplify styles * simplify dynamic classnames * simplify dynamic classnames * use goToStep instead of actionUrl

test/e2e/specs/plans/plans__legacy-renew.ts (#67520)

e48b590

- remove deprecated spec

ciprianimike added 5 commits September 20, 2022 06:38

Cancellation modal CSS fixes

406af82

Remove debug code

1b308fc

Use plans-list.tsx for cancellation flow features and remove domains

b84c69b

Refactored plans cancellation flow copy

fd19d9e

Merge branch 'update/pre-cancelation-modal' of github.com:Automattic/…

6031d09

…wp-calypso into update/pre-cancelation-modal Rebase trunk branch

ciprianimike requested review from a team, worldomonation and WunderBart as code owners September 20, 2022 04:40

ciprianimike requested review from a team September 20, 2022 04:40

ciprianimike requested review from noahtallen and a team as code owners September 20, 2022 04:40

ciprianimike requested a review from a team September 20, 2022 04:40

ciprianimike requested a review from a team as a code owner September 20, 2022 04:40

ciprianimike mentioned this pull request Sep 20, 2022

Update/pre cancelation modal new #68014

Closed

ciprianimike mentioned this pull request Sep 22, 2022

Purchase Management: add new cancelation modal #68067

Draft

ciprianimike closed this Sep 27, 2022

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 27, 2022

sirreal deleted the update/pre-cancelation-modal branch January 14, 2025 18:03


		import './style.scss';

		class RemovePlanDialog extends Component {

New purchase cancelation dialog #67090

New purchase cancelation dialog #67090

Conversation

ciprianimike commented Aug 29, 2022 • edited Loading

Acceptance Criteria

Proposed Changes

Testing Instructions

Before

After

Issue

github-actions bot commented Aug 29, 2022 • edited by matticbot Loading

matticbot commented Aug 29, 2022 • edited Loading

ddc22 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

a8ci18n commented Sep 6, 2022 • edited Loading

DavidRothstein left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ciprianimike Sep 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddc22 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sirbrillig Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaeldcain Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JanaMW27 Sep 14, 2022 • edited by danielpost Loading

Choose a reason for hiding this comment

a8ci18n commented Sep 8, 2022

matticbot commented Sep 20, 2022

JessBoctor commented Sep 21, 2022

ciprianimike commented Sep 22, 2022

JanaMW27 commented Sep 22, 2022

mreishus commented Sep 23, 2022 • edited Loading

ciprianimike commented Sep 23, 2022

michaeldcain commented Sep 26, 2022

ciprianimike commented Aug 29, 2022 •

edited

Loading

github-actions bot commented Aug 29, 2022 •

edited by matticbot

Loading

matticbot commented Aug 29, 2022 •

edited

Loading

a8ci18n commented Sep 6, 2022 •

edited

Loading

ciprianimike Sep 13, 2022 •

edited

Loading

sirbrillig Sep 7, 2022 •

edited

Loading

michaeldcain Sep 7, 2022 •

edited

Loading

JanaMW27 Sep 14, 2022 •

edited by danielpost

Loading

mreishus commented Sep 23, 2022 •

edited

Loading