From 0539f30c8100a481bf1824392287384a7ebd7740 Mon Sep 17 00:00:00 2001
From: Payton Swick <payton@foolord.com>
Date: Tue, 8 Oct 2024 11:17:33 -0400
Subject: [PATCH] Purchases: Revamp Cancellation Flow (originally 93211)
 (#95065)

* Initial commit

* Revamp cancellation flow

* Address review

* Fix console errors

* Improve button alignment

* Remove redundant styles

* Remove bold for "immediately"

* Address review

* Address feedback

* Address review

* Remove linter comment

---------

Co-authored-by: Aurorum <43215253+Aurorum@users.noreply.github.com>
---
 .../me/purchases/cancel-purchase/button.jsx   |  55 +--
 .../cancel-purchase/domain-options.jsx        | 299 +++++++++++++++
 .../cancel-purchase/feature-list.jsx          |  61 +++
 client/me/purchases/cancel-purchase/index.jsx | 290 +++++++++-----
 .../cancel-purchase/loading-placeholder.jsx   |  46 +--
 .../cancel-purchase/refund-information.jsx    | 353 +-----------------
 .../me/purchases/cancel-purchase/style.scss   | 197 +++++++---
 .../cancel-purchase/support-link.jsx          |  83 ++++
 .../purchases/confirm-cancel-domain/index.jsx |  65 ++--
 .../loading-placeholder.jsx                   |  36 +-
 .../confirm-cancel-domain/style.scss          |  15 +
 client/me/purchases/controller.jsx            |   4 -
 packages/calypso-products/src/plans-list.tsx  |  35 ++
 packages/calypso-products/src/types.ts        |   1 +
 14 files changed, 950 insertions(+), 590 deletions(-)
 create mode 100644 client/me/purchases/cancel-purchase/domain-options.jsx
 create mode 100644 client/me/purchases/cancel-purchase/feature-list.jsx
 create mode 100644 client/me/purchases/cancel-purchase/support-link.jsx

diff --git a/client/me/purchases/cancel-purchase/button.jsx b/client/me/purchases/cancel-purchase/button.jsx
index 308b4830b84ea..59c7e6555daac 100644
--- a/client/me/purchases/cancel-purchase/button.jsx
+++ b/client/me/purchases/cancel-purchase/button.jsx
@@ -275,42 +275,51 @@ class CancelPurchaseButton extends Component {
 
 	render() {
 		const { purchase, translate, cancelBundledDomain, includedDomainPurchase } = this.props;
-		let text;
-		let onClick;
 
-		if ( hasAmountAvailableToRefund( purchase ) ) {
-			onClick = this.handleCancelPurchaseClick;
+		const isValidForRefund =
+			isDomainRegistration( purchase ) ||
+			isSubscription( purchase ) ||
+			isOneTimePurchase( purchase );
 
-			if ( isDomainRegistration( purchase ) ) {
-				text = translate( 'Cancel Domain and Refund' );
+		const isValidForCancel = isDomainRegistration( purchase ) && isRefundable( purchase );
+
+		const onClick = ( () => {
+			if ( hasAmountAvailableToRefund( purchase ) && isValidForRefund ) {
+				return this.handleCancelPurchaseClick;
 			}
 
-			if ( isSubscription( purchase ) ) {
-				text = translate( 'Cancel Subscription' );
+			if ( ! hasAmountAvailableToRefund( purchase ) && isValidForCancel ) {
+				return this.handleCancelPurchaseClick;
 			}
 
-			if ( isOneTimePurchase( purchase ) ) {
-				text = translate( 'Cancel and Refund' );
+			if ( ! hasAmountAvailableToRefund( purchase ) && isSubscription( purchase ) ) {
+				return this.handleCancelPurchaseClick;
 			}
-		} else {
-			onClick = () => {
-				this.cancelPurchase( purchase );
-			};
 
-			if ( isDomainRegistration( purchase ) ) {
-				text = translate( 'Cancel Domain' );
+			return () => this.cancelPurchase( purchase );
+		} )();
 
-				// Domain in AGP bought with domain credits should be canceled immediately
-				if ( isRefundable( purchase ) ) {
-					onClick = this.handleCancelPurchaseClick;
+		const text = ( () => {
+			if ( hasAmountAvailableToRefund( purchase ) ) {
+				if ( isDomainRegistration( purchase ) ) {
+					return translate( 'Cancel domain and refund' );
+				}
+				if ( isSubscription( purchase ) ) {
+					return translate( 'Cancel subscription' );
+				}
+				if ( isOneTimePurchase( purchase ) ) {
+					return translate( 'Cancel and refund' );
 				}
 			}
 
+			if ( isDomainRegistration( purchase ) ) {
+				return translate( 'Cancel domain' );
+			}
+
 			if ( isSubscription( purchase ) ) {
-				onClick = this.handleCancelPurchaseClick;
-				text = translate( 'Cancel Subscription' );
+				return translate( 'Cancel subscription' );
 			}
-		}
+		} )();
 
 		const disableButtons = this.state.disabled || this.props.disabled;
 		const { isJetpack, isAkismet, purchaseListUrl, activeSubscriptions } = this.props;
@@ -322,7 +331,7 @@ class CancelPurchaseButton extends Component {
 		const planName = getName( purchase );
 
 		return (
-			<div>
+			<div className="cancel-purchase__button-wrapper">
 				<Button
 					className="cancel-purchase__button"
 					disabled={ disableButtons }
diff --git a/client/me/purchases/cancel-purchase/domain-options.jsx b/client/me/purchases/cancel-purchase/domain-options.jsx
new file mode 100644
index 0000000000000..8ba2310e1c9b0
--- /dev/null
+++ b/client/me/purchases/cancel-purchase/domain-options.jsx
@@ -0,0 +1,299 @@
+import { isDomainRegistration, isDomainMapping } from '@automattic/calypso-products';
+import { CompactCard, FormLabel } from '@automattic/components';
+import { localizeUrl } from '@automattic/i18n-utils';
+import { UPDATE_NAMESERVERS } from '@automattic/urls';
+import { useTranslate } from 'i18n-calypso';
+import { useState, useEffect } from 'react';
+import FormCheckbox from 'calypso/components/forms/form-checkbox';
+import FormRadio from 'calypso/components/forms/form-radio';
+import { getName, isRefundable, isSubscription } from 'calypso/lib/purchases';
+
+const CancelPurchaseDomainOptions = ( {
+	includedDomainPurchase,
+	cancelBundledDomain,
+	confirmCancelBundledDomain = false,
+	purchase,
+	onCancelConfirmationStateChange,
+} ) => {
+	const translate = useTranslate();
+	const [ confirmCancel, setConfirmCancel ] = useState( confirmCancelBundledDomain );
+
+	useEffect( () => {
+		setConfirmCancel( confirmCancelBundledDomain );
+	}, [ confirmCancelBundledDomain ] );
+
+	if ( ! includedDomainPurchase || ! isSubscription( purchase ) ) {
+		return null;
+	}
+
+	const onCancelBundledDomainChange = ( event ) => {
+		const newCancelBundledDomainValue = event.currentTarget.value === 'cancel';
+		onCancelConfirmationStateChange( {
+			cancelBundledDomain: newCancelBundledDomainValue,
+			confirmCancelBundledDomain: newCancelBundledDomainValue && confirmCancel,
+		} );
+	};
+
+	const onConfirmCancelBundledDomainChange = ( event ) => {
+		const checked = event.target.checked;
+		setConfirmCancel( checked );
+		onCancelConfirmationStateChange( {
+			cancelBundledDomain,
+			confirmCancelBundledDomain: checked,
+		} );
+	};
+
+	const planCostText = purchase.totalRefundText;
+
+	const NonRefundableDomainMappingMessage = () => (
+		<div>
+			<p>
+				{ translate(
+					'This plan includes the custom domain mapping for %(mappedDomain)s. ' +
+						'The domain will not be removed along with the plan, to avoid any interruptions for your visitors.',
+					{
+						args: {
+							mappedDomain: includedDomainPurchase.meta,
+						},
+					}
+				) }
+			</p>
+		</div>
+	);
+
+	const CancelableDomainMappingMessage = () => (
+		<div>
+			<p>
+				{ translate(
+					'This plan includes mapping for the domain %(mappedDomain)s. ' +
+						"Cancelling will remove all the plan's features from your site, including the domain.",
+					{
+						args: {
+							mappedDomain: includedDomainPurchase.meta,
+						},
+					}
+				) }
+			</p>
+			<p>
+				{ translate(
+					'Your site will no longer be available at %(mappedDomain)s. Instead, it will be at %(wordpressSiteUrl)s',
+					{
+						args: {
+							mappedDomain: includedDomainPurchase.meta,
+							wordpressSiteUrl: purchase.domain,
+						},
+					}
+				) }
+			</p>
+			<p>
+				{ translate(
+					'The domain %(mappedDomain)s itself is not canceled. Only the connection between WordPress.com and ' +
+						'your domain is removed. %(mappedDomain)s is registered elsewhere and you can still use it with other sites.',
+					{
+						args: {
+							mappedDomain: includedDomainPurchase.meta,
+						},
+					}
+				) }
+			</p>
+		</div>
+	);
+
+	const NonRefundableDomainPurchaseMessage = () => (
+		<div>
+			<p>
+				{ translate(
+					'This plan includes the custom domain, %(domain)s, normally a %(domainCost)s purchase. ' +
+						'The domain will not be removed along with the plan, to avoid any interruptions for your visitors.',
+					{
+						args: {
+							domain: includedDomainPurchase.meta,
+							domainCost: includedDomainPurchase.priceText,
+						},
+					}
+				) }
+			</p>
+		</div>
+	);
+
+	const RefundablePurchaseWithNonRefundableDomainMessage = () => (
+		<div>
+			<p>
+				{ translate(
+					'This plan includes the custom domain, %(domain)s, normally a %(domainCost)s purchase. ' +
+						'The domain will not be removed along with the plan, to avoid any interruptions for your visitors.',
+					{
+						args: {
+							domain: includedDomainPurchase.meta,
+							domainCost: includedDomainPurchase.priceText,
+						},
+					}
+				) }
+			</p>
+			<p>
+				{ translate(
+					'You will receive a partial refund of %(refundAmount)s which is %(planCost)s for the plan ' +
+						'minus %(domainCost)s for the domain.',
+					{
+						args: {
+							domainCost: includedDomainPurchase.priceText,
+							planCost: planCostText,
+							refundAmount: purchase.refundText,
+						},
+					}
+				) }
+			</p>
+		</div>
+	);
+
+	if (
+		! isDomainMapping( includedDomainPurchase ) &&
+		! isDomainRegistration( includedDomainPurchase )
+	) {
+		return null;
+	}
+
+	// Domain mapping.
+	if ( isDomainMapping( includedDomainPurchase ) ) {
+		if ( ! isRefundable( purchase ) ) {
+			return <NonRefundableDomainMappingMessage />;
+		}
+
+		return <CancelableDomainMappingMessage />;
+	}
+
+	// Domain registration.
+	if ( ! isRefundable( purchase ) ) {
+		return <NonRefundableDomainPurchaseMessage />;
+	}
+
+	if ( isRefundable( purchase ) && ! isRefundable( includedDomainPurchase ) ) {
+		return <RefundablePurchaseWithNonRefundableDomainMessage />;
+	}
+
+	return (
+		<div className="cancel-purchase__domain-options">
+			<p>
+				{ translate(
+					'Your plan includes the custom domain {{strong}}%(domain)s{{/strong}}. What would you like to do with the domain?',
+					{
+						args: {
+							domain: includedDomainPurchase.meta,
+						},
+						components: {
+							strong: <strong />,
+						},
+					}
+				) }
+			</p>
+			<CompactCard>
+				<FormLabel key="keep_bundled_domain">
+					<FormRadio
+						name="keep_bundled_domain_false"
+						value="keep"
+						checked={ ! cancelBundledDomain }
+						onChange={ onCancelBundledDomainChange }
+						label={
+							<>
+								{ translate( 'Cancel the plan, but keep "%(domain)s"', {
+									args: {
+										domain: includedDomainPurchase.meta,
+									},
+								} ) }
+								<br />
+								<span className="cancel-purchase__refund-domain-info">
+									{ translate(
+										"You'll receive a partial refund of %(refundAmount)s -- the cost of the %(productName)s " +
+											'plan, minus %(domainCost)s for the domain. There will be no change to your domain ' +
+											"registration, and you're free to use it on WordPress.com or transfer it elsewhere.",
+										{
+											args: {
+												productName: getName( purchase ),
+												domainCost: includedDomainPurchase.costToUnbundleText,
+												refundAmount: purchase.refundText,
+											},
+										}
+									) }
+								</span>
+							</>
+						}
+					/>
+				</FormLabel>
+			</CompactCard>
+			<CompactCard>
+				<FormLabel key="cancel_bundled_domain">
+					<FormRadio
+						name="cancel_bundled_domain_false"
+						value="cancel"
+						checked={ cancelBundledDomain }
+						onChange={ onCancelBundledDomainChange }
+						label={
+							<>
+								{ translate( 'Cancel the plan {{strong}}and{{/strong}} the domain "%(domain)s"', {
+									args: {
+										domain: includedDomainPurchase.meta,
+									},
+									components: {
+										strong: <strong />,
+									},
+								} ) }
+								<br />
+								<span className="cancel-purchase__refund-domain-info">
+									{ translate(
+										"You'll receive a full refund of %(planCost)s. The domain will be cancelled, and it's possible " +
+											"you'll lose it permanently.",
+										{
+											args: {
+												planCost: planCostText,
+											},
+										}
+									) }
+								</span>
+							</>
+						}
+					/>
+				</FormLabel>
+			</CompactCard>
+			{ cancelBundledDomain && (
+				<span className="cancel-purchase__domain-warning">
+					{ translate(
+						"When you cancel a domain, it becomes unavailable for a while. Anyone may register it once it's " +
+							"available again, so it's possible you won't have another chance to register it in the future. " +
+							"If you'd like to use your domain on a site hosted elsewhere, consider {{a}}updating your name " +
+							'servers{{/a}} instead.',
+						{
+							components: {
+								a: (
+									<a
+										href={ localizeUrl( UPDATE_NAMESERVERS ) }
+										target="_blank"
+										rel="noopener noreferrer"
+									/>
+								),
+							},
+						}
+					) }
+					<FormLabel>
+						<FormCheckbox
+							checked={ confirmCancel }
+							onChange={ onConfirmCancelBundledDomainChange }
+						/>
+						<span className="cancel-purchase__domain-confirm">
+							{ translate(
+								'I understand that canceling my domain means I might {{strong}}never be able to register it ' +
+									'again{{/strong}}.',
+								{
+									components: {
+										strong: <strong />,
+									},
+								}
+							) }
+						</span>
+					</FormLabel>
+				</span>
+			) }
+		</div>
+	);
+};
+
+export default CancelPurchaseDomainOptions;
diff --git a/client/me/purchases/cancel-purchase/feature-list.jsx b/client/me/purchases/cancel-purchase/feature-list.jsx
new file mode 100644
index 0000000000000..6eb8224d8f57f
--- /dev/null
+++ b/client/me/purchases/cancel-purchase/feature-list.jsx
@@ -0,0 +1,61 @@
+import { getFeatureByKey } from '@automattic/calypso-products';
+import { Gridicon } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
+import { getName, isRefundable } from 'calypso/lib/purchases';
+
+const CancelPurchaseFeatureList = ( { purchase, cancellationFeatures } ) => {
+	const translate = useTranslate();
+
+	if ( ! cancellationFeatures.length ) {
+		return;
+	}
+
+	return (
+		<div className="cancel-purchase__features">
+			<p>
+				{ isRefundable( purchase )
+					? translate(
+							'By canceling the %(productName)s plan, these features will no longer be available on your site:',
+							{
+								args: {
+									productName: getName( purchase ),
+								},
+							}
+					  )
+					: translate(
+							'These features will no longer be available on your site when your %(productName)s plan expires:',
+							{
+								args: {
+									productName: getName( purchase ),
+								},
+							}
+					  ) }
+			</p>
+			<ul className="cancel-purchase__features-list">
+				{ cancellationFeatures.map( ( feature ) => {
+					return (
+						<li key={ feature }>
+							<Gridicon
+								className="cancel-purchase__refund-information--item-cross-small"
+								size={ 24 }
+								icon="cross-small"
+							/>
+							<span>{ getFeatureByKey( feature ).getTitle() }</span>
+						</li>
+					);
+				} ) }
+			</ul>
+			<p className="cancel-purchase__features-link">
+				<a href={ '/plans/my-plan/' + purchase.domain }>
+					{ translate( 'View all features', {
+						args: {
+							productName: getName( purchase ),
+						},
+					} ) }
+				</a>
+			</p>
+		</div>
+	);
+};
+
+export default CancelPurchaseFeatureList;
diff --git a/client/me/purchases/cancel-purchase/index.jsx b/client/me/purchases/cancel-purchase/index.jsx
index 0caeee29970da..be7ae76817fc6 100644
--- a/client/me/purchases/cancel-purchase/index.jsx
+++ b/client/me/purchases/cancel-purchase/index.jsx
@@ -12,12 +12,14 @@ import { Card, CompactCard } from '@automattic/components';
 import formatCurrency from '@automattic/format-currency';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import { Component, Fragment } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 import BackupRetentionOptionOnCancelPurchase from 'calypso/components/backup-retention-management/retention-option-on-cancel-purchase';
 import QueryProductsList from 'calypso/components/data/query-products-list';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
-import HeaderCake from 'calypso/components/header-cake';
+import FormattedHeader from 'calypso/components/formatted-header';
+import FormButton from 'calypso/components/forms/form-button';
+import HeaderCakeBack from 'calypso/components/header-cake/back';
 import { withLocalizedMoment } from 'calypso/components/localized-moment';
 import {
 	getName,
@@ -32,7 +34,6 @@ import CancelPurchaseLoadingPlaceholder from 'calypso/me/purchases/cancel-purcha
 import { managePurchase, purchasesRoot } from 'calypso/me/purchases/paths';
 import ProductLink from 'calypso/me/purchases/product-link';
 import PurchaseSiteHeader from 'calypso/me/purchases/purchases-site/header';
-import titles from 'calypso/me/purchases/titles';
 import TrackPurchasePageView from 'calypso/me/purchases/track-purchase-page-view';
 import { isDataLoading } from 'calypso/me/purchases/utils';
 import { getProductsList } from 'calypso/state/products-list/selectors';
@@ -44,7 +45,10 @@ import {
 } from 'calypso/state/purchases/selectors';
 import { isRequestingSites, getSite } from 'calypso/state/sites/selectors';
 import CancelPurchaseButton from './button';
+import CancelPurchaseDomainOptions from './domain-options';
+import CancelPurchaseFeatureList from './feature-list';
 import CancelPurchaseRefundInformation from './refund-information';
+import CancelPurchaseSupportLink from './support-link';
 
 import './style.scss';
 
@@ -136,55 +140,132 @@ class CancelPurchase extends Component {
 		);
 	}
 
-	renderFooterText = () => {
-		const { purchase } = this.props;
-		const { expiryDate, refundInteger, totalRefundInteger, totalRefundCurrency } = purchase;
-		if ( hasAmountAvailableToRefund( purchase ) ) {
-			if ( this.state.cancelBundledDomain && this.props.includedDomainPurchase ) {
-				return this.props.translate( '%(refundText)s to be refunded', {
-					args: {
-						refundText: formatCurrency( totalRefundInteger, totalRefundCurrency, {
-							isSmallestUnit: true,
-						} ),
-					},
-					context: 'refundText is of the form "[currency-symbol][amount]" i.e. "$20"',
-				} );
-			}
-			return this.props.translate( '%(refundText)s to be refunded', {
-				args: {
-					refundText: formatCurrency( refundInteger, totalRefundCurrency, {
-						isSmallestUnit: true,
-					} ),
-				},
-				context: 'refundText is of the form "[currency-symbol][amount]" i.e. "$20"',
-			} );
-		}
+	renderExpirationText = () => {
+		const { purchase, translate } = this.props;
+		const { expiryDate } = purchase;
 
 		const expirationDate = this.props.moment( expiryDate ).format( 'LL' );
 
 		if ( isDomainRegistration( purchase ) ) {
 			// Domain in AGP bought with domain credits
 			if ( isRefundable( purchase ) ) {
-				return this.props.translate(
-					'After you confirm this change, the domain will be removed immediately'
+				return translate(
+					'After you confirm this change, the domain will be removed immediately.'
 				);
 			}
-			return this.props.translate(
-				'After you confirm this change, the domain will be removed on %(expirationDate)s',
+			return translate(
+				'After you confirm this change, the domain will be removed on %(expirationDate)s.',
 				{
 					args: { expirationDate },
 				}
 			);
 		}
 
-		return this.props.translate(
-			'After you confirm this change, the subscription will be removed on %(expirationDate)s',
+		return translate(
+			'After you confirm this change, the subscription will be removed on %(expirationDate)s.',
 			{
 				args: { expirationDate },
 			}
 		);
 	};
 
+	renderFullText = () => {
+		const { includedDomainPurchase, purchase, translate } = this.props;
+		const { expiryDate } = purchase;
+		const expirationDate = this.props.moment( expiryDate ).format( 'LL' );
+
+		const refundAmountString = this.renderRefundAmountString(
+			purchase,
+			this.state.cancelBundledDomain,
+			includedDomainPurchase
+		);
+
+		if ( refundAmountString ) {
+			return translate(
+				'If you confirm this cancellation, you will receive a {{span}}refund of %(refundText)s{{/span}}, and your subscription will be removed immediately.',
+				{
+					args: {
+						refundText: refundAmountString,
+					},
+					context: 'refundText is of the form "[currency-symbol][amount]" i.e. "$20"',
+					components: {
+						span: <span className="cancel-purchase__refund-string" />,
+					},
+				}
+			);
+		}
+
+		return translate(
+			'If you complete this cancellation, your subscription will be removed on {{span}}%(expirationDate)s{{/span}}.',
+			{
+				args: {
+					expirationDate,
+				},
+				components: {
+					span: <span className="cancel-purchase__warning-string" />,
+				},
+			}
+		);
+	};
+
+	renderFooterText = () => {
+		const { purchase, translate } = this.props;
+
+		const refundAmountString = this.renderRefundAmountString(
+			purchase,
+			this.state.cancelBundledDomain,
+			this.props.includedDomainPurchase
+		);
+
+		if ( refundAmountString ) {
+			return translate( '%(refundText)s to be refunded', {
+				args: {
+					refundText: refundAmountString,
+				},
+				context: 'refundText is of the form "[currency-symbol][amount]" i.e. "$20"',
+			} );
+		}
+	};
+
+	renderRefundAmountString = ( purchase, cancelBundledDomain, includedDomainPurchase ) => {
+		const { refundInteger, totalRefundInteger, totalRefundCurrency } = purchase;
+
+		if ( hasAmountAvailableToRefund( purchase ) ) {
+			if ( cancelBundledDomain && includedDomainPurchase ) {
+				return formatCurrency( totalRefundInteger, totalRefundCurrency, {
+					isSmallestUnit: true,
+				} );
+			}
+			return formatCurrency( refundInteger, totalRefundCurrency, {
+				isSmallestUnit: true,
+			} );
+		}
+
+		return null;
+	};
+
+	renderCancelButton = () => {
+		const {
+			purchase,
+			includedDomainPurchase,
+			siteSlug,
+			purchaseListUrl,
+			getConfirmCancelDomainUrlFor,
+		} = this.props;
+		return (
+			<CancelPurchaseButton
+				purchase={ purchase }
+				includedDomainPurchase={ includedDomainPurchase }
+				disabled={ this.state.cancelBundledDomain && ! this.state.confirmCancelBundledDomain }
+				siteSlug={ siteSlug }
+				cancelBundledDomain={ this.state.cancelBundledDomain }
+				purchaseListUrl={ purchaseListUrl }
+				getConfirmCancelDomainUrlFor={ getConfirmCancelDomainUrlFor }
+				activeSubscriptions={ this.getActiveMarketplaceSubscriptions() }
+			/>
+		);
+	};
+
 	render() {
 		if ( ! this.isDataValid() ) {
 			return null;
@@ -194,11 +275,7 @@ class CancelPurchase extends Component {
 			return (
 				<div>
 					<QueryUserPurchases />
-					<CancelPurchaseLoadingPlaceholder
-						purchaseId={ this.props.purchaseId }
-						siteSlug={ this.props.siteSlug }
-						getManagePurchaseUrlFor={ this.props.getManagePurchaseUrlFor }
-					/>
+					<CancelPurchaseLoadingPlaceholder />
 				</div>
 			);
 		}
@@ -209,6 +286,9 @@ class CancelPurchase extends Component {
 		const planDescription = plan?.getPlanCancellationDescription?.();
 		const { siteName, siteId } = purchase;
 
+		const cancellationFeatures =
+			plan && 'getCancellationFeatures' in plan ? plan.getCancellationFeatures?.() ?? [] : [];
+
 		let heading;
 
 		if ( isDomainRegistration( purchase ) || isOneTimePurchase( purchase ) ) {
@@ -218,68 +298,106 @@ class CancelPurchase extends Component {
 		}
 
 		if ( isSubscription( purchase ) ) {
-			heading = this.props.translate( 'Cancel Your %(purchaseName)s Subscription', {
+			heading = this.props.translate( 'Cancel your %(purchaseName)s subscription', {
 				args: { purchaseName },
 			} );
 		}
 
 		return (
-			<Fragment>
+			<Card className="cancel-purchase__wrapper-card">
 				<QueryProductsList />
 				<TrackPurchasePageView
 					eventName="calypso_cancel_purchase_purchase_view"
 					purchaseId={ this.props.purchaseId }
 				/>
 
-				<HeaderCake
-					backHref={ this.props.getManagePurchaseUrlFor(
-						this.props.siteSlug,
-						this.props.purchaseId
-					) }
-				>
-					{ titles.cancelPurchase }
-				</HeaderCake>
-
-				<BackupRetentionOptionOnCancelPurchase purchase={ purchase } />
-
-				<Card className="cancel-purchase__card">
-					<h2>{ heading }</h2>
-
-					<CancelPurchaseRefundInformation
-						purchase={ purchase }
-						isJetpackPurchase={ isJetpackPurchase }
-						includedDomainPurchase={ this.props.includedDomainPurchase }
-						confirmBundledDomain={ this.state.confirmCancelBundledDomain }
-						cancelBundledDomain={ this.state.cancelBundledDomain }
-						onCancelConfirmationStateChange={ this.onCancelConfirmationStateChange }
+				<div className="cancel-purchase__back">
+					<HeaderCakeBack
+						icon="chevron-left"
+						href={ this.props.getManagePurchaseUrlFor(
+							this.props.siteSlug,
+							this.props.purchaseId
+						) }
 					/>
-				</Card>
-
-				<PurchaseSiteHeader siteId={ siteId } name={ siteName } purchase={ purchase } />
-				<CompactCard className="cancel-purchase__product-information">
-					<div className="cancel-purchase__purchase-name">{ purchaseName }</div>
-					<div className="cancel-purchase__description">{ purchaseType( purchase ) }</div>
-					{ planDescription && (
-						<div className="cancel-purchase__plan-description">{ planDescription }</div>
-					) }
-					<ProductLink purchase={ purchase } selectedSite={ this.props.site } />
-				</CompactCard>
-				<CompactCard className="cancel-purchase__footer">
-					<div className="cancel-purchase__refund-amount">
-						{ this.renderFooterText( this.props ) }
+				</div>
+
+				<FormattedHeader
+					className="cancel-purchase__formatted-header"
+					brandFont
+					headerText={ heading }
+					align="left"
+				/>
+
+				<div className="cancel-purchase__inner-wrapper">
+					<div className="cancel-purchase__left">
+						<BackupRetentionOptionOnCancelPurchase purchase={ purchase } />
+
+						<CancelPurchaseRefundInformation
+							purchase={ purchase }
+							isJetpackPurchase={ isJetpackPurchase }
+						/>
+
+						<CancelPurchaseFeatureList
+							purchase={ purchase }
+							cancellationFeatures={ cancellationFeatures }
+						/>
+
+						<CancelPurchaseDomainOptions
+							includedDomainPurchase={ this.props.includedDomainPurchase }
+							cancelBundledDomain={ this.state.cancelBundledDomain }
+							onCancelConfirmationStateChange={ this.onCancelConfirmationStateChange }
+							purchase={ purchase }
+						/>
+
+						{ ! cancellationFeatures.length ? (
+							<>
+								<CompactCard className="cancel-purchase__product-information">
+									<div className="cancel-purchase__purchase-name">{ purchaseName }</div>
+									<div className="cancel-purchase__description">{ purchaseType( purchase ) }</div>
+									{ planDescription && (
+										<div className="cancel-purchase__plan-description">{ planDescription }</div>
+									) }
+									<ProductLink purchase={ purchase } selectedSite={ this.props.site } />
+								</CompactCard>
+
+								<CompactCard className="cancel-purchase__footer">
+									<div className="cancel-purchase__footer-text">
+										{ hasAmountAvailableToRefund( purchase ) ? (
+											<p className="cancel-purchase__refund-amount">{ this.renderFooterText() }</p>
+										) : (
+											<p className="cancel-purchase__expiration-text">
+												{ this.renderExpirationText() }
+											</p>
+										) }
+									</div>
+									{ this.renderCancelButton() }
+								</CompactCard>
+							</>
+						) : (
+							<>
+								<p>{ this.renderFullText() }</p>
+								<div className="cancel-purchase__confirm-buttons">
+									{ this.renderCancelButton() }
+									<FormButton
+										isPrimary={ false }
+										href={ this.props.getManagePurchaseUrlFor(
+											this.props.siteSlug,
+											this.props.purchaseId
+										) }
+									>
+										{ this.props.translate( 'Keep subscription' ) }
+									</FormButton>
+								</div>
+							</>
+						) }
 					</div>
-					<CancelPurchaseButton
-						purchase={ purchase }
-						includedDomainPurchase={ this.props.includedDomainPurchase }
-						disabled={ this.state.cancelBundledDomain && ! this.state.confirmCancelBundledDomain }
-						siteSlug={ this.props.siteSlug }
-						cancelBundledDomain={ this.state.cancelBundledDomain }
-						purchaseListUrl={ this.props.purchaseListUrl }
-						getConfirmCancelDomainUrlFor={ this.props.getConfirmCancelDomainUrlFor }
-						activeSubscriptions={ this.getActiveMarketplaceSubscriptions() }
-					/>
-				</CompactCard>
-			</Fragment>
+
+					<div className="cancel-purchase__right">
+						<PurchaseSiteHeader siteId={ siteId } name={ siteName } purchase={ purchase } />
+						<CancelPurchaseSupportLink purchase={ purchase } />
+					</div>
+				</div>
+			</Card>
 		);
 	}
 }
diff --git a/client/me/purchases/cancel-purchase/loading-placeholder.jsx b/client/me/purchases/cancel-purchase/loading-placeholder.jsx
index 4c6c529c504b2..822502769095b 100644
--- a/client/me/purchases/cancel-purchase/loading-placeholder.jsx
+++ b/client/me/purchases/cancel-purchase/loading-placeholder.jsx
@@ -1,38 +1,28 @@
-import { Button, Card, CompactCard } from '@automattic/components';
+import { Card, CompactCard } from '@automattic/components';
 import { localize } from 'i18n-calypso';
-import PropTypes from 'prop-types';
-import LoadingPlaceholder from 'calypso/me/purchases/components/loading-placeholder';
-import titles from 'calypso/me/purchases/titles';
-
-const CancelPurchaseLoadingPlaceholder = ( { purchaseId, siteSlug, getManagePurchaseUrlFor } ) => {
-	let path;
-
-	if ( siteSlug ) {
-		path = getManagePurchaseUrlFor( siteSlug, purchaseId );
-	}
 
+const CancelPurchaseLoadingPlaceholder = () => {
 	/* eslint-disable wpcalypso/jsx-classname-namespace, jsx-a11y/heading-has-content */
 	return (
-		<LoadingPlaceholder title={ titles.cancelPurchase } path={ path } isFullWidth>
-			<Card className="cancel-purchase-loading-placeholder__card">
-				<h2 className="loading-placeholder__content cancel-purchase-loading-placeholder__header" />
-				<div className="loading-placeholder__content cancel-purchase-loading-placeholder__subheader" />
-				<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
-				<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
-			</Card>
+		<Card className="cancel-purchase__inner-wrapper">
+			<div className="cancel-purchase__left">
+				<Card className="cancel-purchase-loading-placeholder__card">
+					<h2 className="loading-placeholder__content cancel-purchase-loading-placeholder__header" />
+					<div className="loading-placeholder__content cancel-purchase-loading-placeholder__subheader" />
+					<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+					<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+				</Card>
+			</div>
 
-			<CompactCard>
-				<Button className="cancel-purchase-loading-placeholder__cancel-button" />
-			</CompactCard>
-		</LoadingPlaceholder>
+			<div className="cancel-purchase__right">
+				<CompactCard>
+					<div className="loading-placeholder__content cancel-purchase-loading-placeholder__subheader" />
+					<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+				</CompactCard>
+			</div>
+		</Card>
 	);
 };
 /* eslint-enable wpcalypso/jsx-classname-namespace, jsx-a11y/heading-has-content */
 
-CancelPurchaseLoadingPlaceholder.propTypes = {
-	purchaseId: PropTypes.number.isRequired,
-	siteSlug: PropTypes.string.isRequired,
-	getManagePurchaseUrlFor: PropTypes.func.isRequired,
-};
-
 export default localize( CancelPurchaseLoadingPlaceholder );
diff --git a/client/me/purchases/cancel-purchase/refund-information.jsx b/client/me/purchases/cancel-purchase/refund-information.jsx
index 7dd430b044119..8fcad9690d4f8 100644
--- a/client/me/purchases/cancel-purchase/refund-information.jsx
+++ b/client/me/purchases/cancel-purchase/refund-information.jsx
@@ -1,24 +1,8 @@
-import { recordTracksEvent } from '@automattic/calypso-analytics';
 import config from '@automattic/calypso-config';
-import { isDomainRegistration, isDomainMapping } from '@automattic/calypso-products';
-import { FormLabel } from '@automattic/components';
-import { HelpCenter } from '@automattic/data-stores';
-import { useChatStatus } from '@automattic/help-center/src/hooks';
-import { localizeUrl } from '@automattic/i18n-utils';
-import Button from '@automattic/odie-client/src/components/button';
-import { UPDATE_NAMESERVERS } from '@automattic/urls';
-import {
-	useCanConnectToZendeskMessaging,
-	useZendeskMessagingAvailability,
-	useOpenZendeskMessaging,
-} from '@automattic/zendesk-client';
-import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
+import { isDomainRegistration } from '@automattic/calypso-products';
 import i18n from 'i18n-calypso';
 import PropTypes from 'prop-types';
-import { useCallback } from 'react';
 import { connect } from 'react-redux';
-import FormCheckbox from 'calypso/components/forms/form-checkbox';
-import FormRadio from 'calypso/components/forms/form-radio';
 import { getSelectedDomain } from 'calypso/lib/domains';
 import {
 	getName,
@@ -26,122 +10,12 @@ import {
 	isRefundable,
 	isSubscription,
 	isOneTimePurchase,
-	maybeWithinRefundPeriod,
 } from 'calypso/lib/purchases';
-import { getIncludedDomainPurchase } from 'calypso/state/purchases/selectors';
 import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
-import './style.scss';
-
-const HELP_CENTER_STORE = HelpCenter.register();
 
-const CancelPurchaseRefundInformation = ( {
-	purchase,
-	isGravatarDomain,
-	isJetpackPurchase,
-	includedDomainPurchase,
-	cancelBundledDomain,
-	confirmCancelBundledDomain,
-	onCancelConfirmationStateChange,
-} ) => {
-	const { siteId, siteUrl, refundPeriodInDays } = purchase;
+const CancelPurchaseRefundInformation = ( { purchase, isGravatarDomain, isJetpackPurchase } ) => {
+	const { refundPeriodInDays } = purchase;
 	let text;
-	let showSupportLink = true;
-	const onCancelBundledDomainChange = ( event ) => {
-		const newCancelBundledDomainValue = event.currentTarget.value === 'cancel';
-		onCancelConfirmationStateChange( {
-			cancelBundledDomain: newCancelBundledDomainValue,
-			confirmCancelBundledDomain: newCancelBundledDomainValue && confirmCancelBundledDomain,
-		} );
-	};
-	const { setShowHelpCenter, setNavigateToRoute, resetStore } =
-		useDataStoreDispatch( HELP_CENTER_STORE );
-	const { isEligibleForChat } = useChatStatus();
-	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging();
-	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
-		'wpcom_messaging',
-		isEligibleForChat
-	);
-	const { openZendeskWidget, isOpeningZendeskWidget } = useOpenZendeskMessaging(
-		'migration-error',
-		'zendesk_support_chat_key',
-		isEligibleForChat
-	);
-
-	const getHelp = useCallback( () => {
-		if ( isMessagingAvailable && canConnectToZendeskMessaging ) {
-			openZendeskWidget( {
-				siteUrl: siteUrl,
-				siteId: siteId,
-				message: `${ status }: Import onboarding flow; migration failed`,
-				onSuccess: () => {
-					resetStore();
-					setShowHelpCenter( false );
-				},
-			} );
-		} else {
-			setNavigateToRoute( '/contact-options' );
-			setShowHelpCenter( true );
-		}
-	}, [
-		resetStore,
-		openZendeskWidget,
-		siteId,
-		isMessagingAvailable,
-		siteUrl,
-		canConnectToZendeskMessaging,
-		setNavigateToRoute,
-		setShowHelpCenter,
-	] );
-
-	const ContactSupportLink = () => {
-		const onClick = () => {
-			recordTracksEvent( 'calypso_cancellation_help_button_click' );
-			getHelp();
-		};
-
-		return (
-			<strong className="cancel-purchase__support-information">
-				{ ! isRefundable( purchase ) && maybeWithinRefundPeriod( purchase )
-					? i18n.translate(
-							'Have a question? Want to request a refund? {{contactLink}}Ask a Happiness Engineer!{{/contactLink}}',
-							{
-								components: {
-									contactLink: (
-										<Button
-											borderless="true"
-											onClick={ onClick }
-											className="cancel-purchase__support-information support-link"
-											disabled={ isOpeningZendeskWidget }
-										/>
-									),
-								},
-							}
-					  )
-					: i18n.translate(
-							'Have a question? {{contactLink}}Ask a Happiness Engineer!{{/contactLink}}',
-							{
-								components: {
-									contactLink: (
-										<Button
-											borderless="true"
-											onClick={ onClick }
-											className="cancel-purchase__support-information support-link"
-											disabled={ isOpeningZendeskWidget }
-										/>
-									),
-								},
-							}
-					  ) }
-			</strong>
-		);
-	};
-
-	const onConfirmCancelBundledDomainChange = ( event ) => {
-		onCancelConfirmationStateChange( {
-			cancelBundledDomain,
-			confirmCancelBundledDomain: event.target.checked,
-		} );
-	};
 
 	if ( isRefundable( purchase ) ) {
 		if ( isDomainRegistration( purchase ) ) {
@@ -176,181 +50,7 @@ const CancelPurchaseRefundInformation = ( {
 					}
 				),
 			];
-			if ( includedDomainPurchase && isDomainMapping( includedDomainPurchase ) ) {
-				text.push(
-					i18n.translate(
-						'This plan includes mapping for the domain %(mappedDomain)s. ' +
-							"Cancelling will remove all the plan's features from your site, including the domain.",
-						{
-							args: {
-								mappedDomain: includedDomainPurchase.meta,
-							},
-						}
-					),
-					i18n.translate(
-						'Your site will no longer be available at %(mappedDomain)s. Instead, it will be at %(wordpressSiteUrl)s',
-						{
-							args: {
-								mappedDomain: includedDomainPurchase.meta,
-								wordpressSiteUrl: purchase.domain,
-							},
-						}
-					),
-					i18n.translate(
-						'The domain %(mappedDomain)s itself is not canceled. Only the connection between WordPress.com and ' +
-							'your domain is removed. %(mappedDomain)s is registered elsewhere and you can still use it with other sites.',
-						{
-							args: {
-								mappedDomain: includedDomainPurchase.meta,
-							},
-						}
-					)
-				);
-
-				showSupportLink = false;
-			} else if ( includedDomainPurchase && isDomainRegistration( includedDomainPurchase ) ) {
-				const planCostText = purchase.totalRefundText;
-				if ( isRefundable( includedDomainPurchase ) ) {
-					text.push(
-						i18n.translate(
-							'Your plan included the custom domain %(domain)s. You can cancel your domain as well as the plan, but keep ' +
-								'in mind that when you cancel a domain you risk losing it forever, and visitors to your site may ' +
-								'experience difficulties accessing it.',
-							{
-								args: {
-									domain: includedDomainPurchase.meta,
-								},
-							}
-						),
-						i18n.translate( "We'd like to offer you two options to choose from:" ),
-						<FormLabel key="keep_bundled_domain">
-							<FormRadio
-								name="keep_bundled_domain_false"
-								value="keep"
-								checked={ ! cancelBundledDomain }
-								onChange={ onCancelBundledDomainChange }
-								label={
-									<>
-										{ i18n.translate( 'Cancel the plan, but keep %(domain)s.', {
-											args: {
-												domain: includedDomainPurchase.meta,
-											},
-										} ) }
-										<br />
-										{ i18n.translate(
-											"You'll receive a partial refund of %(refundAmount)s -- the cost of the %(productName)s " +
-												'plan, minus %(domainCost)s for the domain. There will be no change to your domain ' +
-												"registration, and you're free to use it on WordPress.com or transfer it elsewhere.",
-											{
-												args: {
-													productName: getName( purchase ),
-													domainCost: includedDomainPurchase.costToUnbundleText,
-													refundAmount: purchase.refundText,
-												},
-											}
-										) }
-									</>
-								}
-							/>
-						</FormLabel>,
-						<FormLabel key="cancel_bundled_domain">
-							<FormRadio
-								name="cancel_bundled_domain_false"
-								value="cancel"
-								checked={ cancelBundledDomain }
-								onChange={ onCancelBundledDomainChange }
-								label={
-									<>
-										{ i18n.translate( 'Cancel the plan {{em}}and{{/em}} the domain "%(domain)s."', {
-											args: {
-												domain: includedDomainPurchase.meta,
-											},
-											components: {
-												em: <em />,
-											},
-										} ) }
-										<br />
-										{ i18n.translate(
-											"You'll receive a full refund of %(planCost)s. The domain will be cancelled, and it's possible " +
-												"you'll lose it permanently.",
-											{
-												args: {
-													planCost: planCostText,
-												},
-											}
-										) }
-									</>
-								}
-							/>
-						</FormLabel>
-					);
-
-					if ( cancelBundledDomain ) {
-						text.push(
-							i18n.translate(
-								"When you cancel a domain, it becomes unavailable for a while. Anyone may register it once it's " +
-									"available again, so it's possible you won't have another chance to register it in the future. " +
-									"If you'd like to use your domain on a site hosted elsewhere, consider {{a}}updating your name " +
-									'servers{{/a}} instead.',
-								{
-									components: {
-										a: (
-											<a
-												href={ localizeUrl( UPDATE_NAMESERVERS ) }
-												target="_blank"
-												rel="noopener noreferrer"
-											/>
-										),
-									},
-								}
-							),
-							<FormLabel>
-								<FormCheckbox
-									checked={ confirmCancelBundledDomain }
-									onChange={ onConfirmCancelBundledDomainChange }
-								/>
-								<span>
-									{ i18n.translate(
-										'I understand that canceling my domain means I might {{strong}}never be able to register it ' +
-											'again{{/strong}}.',
-										{
-											components: {
-												strong: <strong />,
-											},
-										}
-									) }
-								</span>
-							</FormLabel>
-						);
-					}
-				} else {
-					text.push(
-						i18n.translate(
-							'This plan includes the custom domain, %(domain)s, normally a %(domainCost)s purchase. ' +
-								'The domain will not be removed along with the plan, to avoid any interruptions for your visitors. ',
-							{
-								args: {
-									domain: includedDomainPurchase.meta,
-									domainCost: includedDomainPurchase.priceText,
-								},
-							}
-						),
-						i18n.translate(
-							'You will receive a partial refund of %(refundAmount)s which is %(planCost)s for the plan ' +
-								'minus %(domainCost)s for the domain.',
-							{
-								args: {
-									domainCost: includedDomainPurchase.priceText,
-									planCost: planCostText,
-									refundAmount: purchase.refundText,
-								},
-							}
-						)
-					);
-				}
-
-				showSupportLink = false;
-			} else if ( isJetpackPurchase && config.isEnabled( 'jetpack/cancel-through-main-flow' ) ) {
+			if ( isJetpackPurchase && config.isEnabled( 'jetpack/cancel-through-main-flow' ) ) {
 				// Refundable Jetpack subscription
 				text = [];
 				text.push(
@@ -400,36 +100,6 @@ const CancelPurchaseRefundInformation = ( {
 				)
 			);
 		}
-	} else if (
-		isSubscription( purchase ) &&
-		includedDomainPurchase &&
-		isDomainMapping( includedDomainPurchase )
-	) {
-		text = i18n.translate(
-			'This plan includes the custom domain mapping for %(mappedDomain)s. ' +
-				'The domain will not be removed along with the plan, to avoid any interruptions for your visitors. ',
-			{
-				args: {
-					mappedDomain: includedDomainPurchase.meta,
-					mappingCost: includedDomainPurchase.priceText,
-				},
-			}
-		);
-	} else if (
-		isSubscription( purchase ) &&
-		includedDomainPurchase &&
-		isDomainRegistration( includedDomainPurchase )
-	) {
-		text = i18n.translate(
-			'This plan includes the custom domain, %(domain)s. ' +
-				'The domain will not be removed along with the plan, to avoid any interruptions for your visitors. ',
-			{
-				args: {
-					domain: includedDomainPurchase.meta,
-					domainCost: includedDomainPurchase.priceText,
-				},
-			}
-		);
 	} else {
 		text = i18n.translate(
 			"When you cancel your subscription, you'll be able to use %(productName)s until your subscription expires. " +
@@ -442,22 +112,21 @@ const CancelPurchaseRefundInformation = ( {
 		);
 	}
 
+	if ( ! text ) {
+		return null;
+	}
+
 	return (
 		<div className="cancel-purchase__info">
 			{ Array.isArray( text ) ? (
 				text.map( ( paragraph, index ) => (
-					<p
-						key={ purchase.id + '_refund_p_' + index }
-						className="cancel-purchase__refund-information"
-					>
+					<p key={ purchase.id + '_refund_p_' + index } className="cancel-purchase__refund-details">
 						{ paragraph }
 					</p>
 				) )
 			) : (
-				<p className="cancel-purchase__refund-information">{ text }</p>
+				<p className="cancel-purchase__refund-details">{ text }</p>
 			) }
-
-			{ showSupportLink && <ContactSupportLink /> }
 		</div>
 	);
 };
@@ -465,7 +134,6 @@ const CancelPurchaseRefundInformation = ( {
 CancelPurchaseRefundInformation.propTypes = {
 	purchase: PropTypes.object.isRequired,
 	isJetpackPurchase: PropTypes.bool.isRequired,
-	includedDomainPurchase: PropTypes.object,
 	cancelBundledDomain: PropTypes.bool,
 	confirmCancelBundledDomain: PropTypes.bool,
 	onCancelConfirmationStateChange: PropTypes.func,
@@ -477,7 +145,6 @@ export default connect( ( state, props ) => {
 	const selectedDomain = getSelectedDomain( { domains, selectedDomainName } );
 
 	return {
-		includedDomainPurchase: getIncludedDomainPurchase( state, props.purchase ),
 		isGravatarDomain: selectedDomain?.isGravatarDomain,
 	};
 } )( CancelPurchaseRefundInformation );
diff --git a/client/me/purchases/cancel-purchase/style.scss b/client/me/purchases/cancel-purchase/style.scss
index dcce1f292c237..b7f798a235a82 100644
--- a/client/me/purchases/cancel-purchase/style.scss
+++ b/client/me/purchases/cancel-purchase/style.scss
@@ -1,62 +1,134 @@
-.cancel-purchase__card {
-	h2 {
-		color: var(--color-neutral-70);
-		font-size: $font-title-small;
-		font-weight: 400;
-		margin-bottom: 20px;
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.is-section-me.is-global-sidebar-visible .purchases__cancel.main,
+.is-section-me.is-global-sidebar-visible .purchases__cancel-domain.main {
+	height: calc(100vh - var(--masterbar-height) - var(--content-padding-top) - var(--content-padding-bottom));
+}
+
+.cancel-purchase__wrapper-card {
+	padding: 32px;
+	padding-top: 12px;
+
+	.purchases__cancel & {
+		box-shadow: none;
+		padding: 0;
 	}
+}
 
-	p {
-		color: var(--color-neutral-40);
-		font-size: $font-body-small;
+.cancel-purchase__back .header-cake__back,
+.confirm-cancel-domain__back .header-cake__back {
+	padding: 24px 0;
+	text-align: left;
+}
+
+.cancel-purchase__right .purchases-site__header.card {
+	background: var(--studio-gray-0);
+	border-radius: 2px;
+
+	.site .site__content {
+		padding: 24px 18px;
+
+		@include break-mobile {
+			padding: 12px;
+		}
 	}
+}
 
-	hr {
-		background: var(--color-neutral-0);
+.cancel-purchase__support-link {
+	color: var(--color-text-subtle);
+	font-size: $font-body-small;
+	margin-top: 12px;
+
+	.is-link {
+		font-size: $font-body-small;
+		text-decoration: none;
 	}
 }
 
-.cancel-purchase__content {
-	margin: 0;
-	padding: 0 0 10px;
+.cancel-purchase__domain-options {
+	.card {
+		margin: 16px 8px;
+	}
 
-	@include breakpoint-deprecated( ">660px" ) {
-		width: 55%;
+	.cancel-purchase__refund-domain-info {
+		color: var(--color-text-subtle);
+		display: inline-block;
+		font-size: $font-body-extra-small;
+		line-height: 1.4;
+		margin-top: 4px;
 	}
 
-	p {
-		color: var(--color-neutral-light);
-		display: block;
+	.cancel-purchase__domain-warning {
+		display: inline-block;
 		font-size: $font-body-small;
-		/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-		line-height: 150%;
-		margin-top: 5px;
+		line-height: 1.4;
+
+		.form-label {
+			margin: 1.5em 0;
+		}
 	}
+}
 
-	hr {
-		margin: 18px 0;
+.cancel-purchase__inner-wrapper {
+	display: flex;
+	flex-direction: column-reverse;
+	margin-bottom: 24px;
+
+	@include break-large {
+		display: grid;
+		grid-template-columns: 7fr 3fr;
+		gap: 32px;
 	}
 }
 
-.cancel-purchase__product-information .product-link {
-	font-size: $font-body-small;
+.confirm-cancel-domain__formatted-header.formatted-header,
+.cancel-purchase__formatted-header.formatted-header {
+	margin: 16px 0;
 }
 
-.cancel-purchase__purchase-name {
-	font-size: $font-body;
-	font-weight: 600;
+.cancel-purchase__features {
+	ul.cancel-purchase__features-list {
+		list-style: none;
+		margin: 1.5em;
+		margin-bottom: 0;
+
+		@include break-mobile {
+			column-count: 2;
+			column-gap: 20px;
+		}
+
+		li {
+			list-style: none;
+			display: flex;
+			margin-bottom: 12px;
+			font-size: $font-body-small;
+
+			span {
+				margin: auto 0;
+				flex: 1;
+			}
+
+			.gridicon {
+				color: var(--color-error-40);
+			}
+		}
+	}
 }
 
-.cancel-purchase__refund-information,
-.cancel-purchase__plan-description,
-.cancel-purchase__support-information {
-	font-size: $font-body-small;
+.cancel-purchase__features-link {
+	text-align: right;
+
+	a {
+		color: var(--color-text-subtle);
+		font-size: $font-body-small;
+		text-decoration: underline;
+	}
 }
 
-.cancel-purchase__support-information .support-link {
-	color: var(--color-primary);
+.cancel-purchase__refund-string {
+	color: var(--color-success);
 	font-weight: 600;
-	padding-inline-start: 0;
 }
 
 .cancel-purchase__site-title {
@@ -64,33 +136,60 @@
 	text-transform: uppercase;
 }
 
-.cancel-purchase__section {
-	color: var(--color-neutral-50);
-	margin: 0;
+.cancel-purchase__warning-string {
+	color: var(--color-error);
+	font-weight: 600;
 }
 
-.cancel-purchase__section-header {
-	display: block;
+.cancel-purchase__confirm-buttons {
+	display: flex;
+
+	.form-button {
+		margin-left: 8px;
+	}
+}
+
+.cancel-purchase__purchase-name {
 	font-size: $font-body;
-	font-weight: 400;
+	font-weight: 600;
+}
+
+.cancel-purchase__product-information .product-link,
+.cancel-purchase__refund-information,
+.cancel-purchase__plan-description {
+	font-size: $font-body-small;
 }
 
 .cancel-purchase__footer {
-	align-items: baseline;
+	align-items: center;
 	display: flex;
-	flex-wrap: wrap;
 	justify-content: space-between;
+	gap: 8px;
+
+	.cancel-purchase__footer-text {
+		flex-grow: 1;
+	}
+
+	.cancel-purchase__button-wrapper {
+		flex-shrink: 0;
+	}
 
 	&::after {
 		display: none;
 	}
 }
 
-.cancel-purchase__refund-amount {
-	color: var(--color-success);
+.cancel-purchase__footer-text p {
 	font-size: $font-body-small;
 	margin: 0;
-	padding: 0 10px 5px 0;
+
+	&.cancel-purchase__refund-amount {
+		color: var(--color-success);
+	}
+
+	&.cancel-purchase__expiration-text {
+		color: var(--color-error);
+	}
 }
 
 .cancel-purchase__button {
@@ -99,8 +198,8 @@
 	}
 }
 
-.cancel-purchase-loading-placeholder__cancel-button {
-	width: 30%;
+.purchases__cancel .cancel-purchase__inner-wrapper.card {
+	box-shadow: none;
 }
 
 .cancel-purchase-loading-placeholder__header {
diff --git a/client/me/purchases/cancel-purchase/support-link.jsx b/client/me/purchases/cancel-purchase/support-link.jsx
new file mode 100644
index 0000000000000..69cfc8b9b6551
--- /dev/null
+++ b/client/me/purchases/cancel-purchase/support-link.jsx
@@ -0,0 +1,83 @@
+import { recordTracksEvent } from '@automattic/calypso-analytics';
+import { HelpCenter } from '@automattic/data-stores';
+import { useChatStatus } from '@automattic/help-center/src/hooks';
+import {
+	useCanConnectToZendeskMessaging,
+	useZendeskMessagingAvailability,
+	useOpenZendeskMessaging,
+} from '@automattic/zendesk-client';
+import { Button } from '@wordpress/components';
+import { useDispatch as useDataStoreDispatch } from '@wordpress/data';
+import { useTranslate } from 'i18n-calypso';
+import { useCallback } from 'react';
+import { isRefundable, maybeWithinRefundPeriod } from 'calypso/lib/purchases';
+
+const HELP_CENTER_STORE = HelpCenter.register();
+
+const CancelPurchaseSupportLink = ( { purchase } ) => {
+	const translate = useTranslate();
+	const { siteId, siteUrl } = purchase;
+	const { setShowHelpCenter, setNavigateToRoute, resetStore } =
+		useDataStoreDispatch( HELP_CENTER_STORE );
+	const { isEligibleForChat } = useChatStatus();
+	const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging();
+	const { data: isMessagingAvailable } = useZendeskMessagingAvailability(
+		'wpcom_messaging',
+		isEligibleForChat
+	);
+	const { openZendeskWidget, isOpeningZendeskWidget } = useOpenZendeskMessaging(
+		'migration-error',
+		'zendesk_support_chat_key',
+		isEligibleForChat
+	);
+
+	const getHelp = useCallback( () => {
+		if ( isMessagingAvailable && canConnectToZendeskMessaging ) {
+			openZendeskWidget( {
+				siteUrl: siteUrl,
+				siteId: siteId,
+				message: `${ status }: Purchase cancellation flow`,
+				onSuccess: () => {
+					resetStore();
+					setShowHelpCenter( false );
+				},
+			} );
+		} else {
+			setNavigateToRoute( '/contact-options' );
+			setShowHelpCenter( true );
+		}
+	}, [
+		resetStore,
+		openZendeskWidget,
+		siteId,
+		isMessagingAvailable,
+		siteUrl,
+		canConnectToZendeskMessaging,
+		setNavigateToRoute,
+		setShowHelpCenter,
+	] );
+
+	const onClick = () => {
+		recordTracksEvent( 'calypso_cancellation_help_button_click' );
+		getHelp();
+	};
+
+	return (
+		<p className="cancel-purchase__support-link">
+			<span>
+				{ ! isRefundable( purchase ) && maybeWithinRefundPeriod( purchase )
+					? translate( 'Have a question or seeking a refund?' )
+					: translate( 'Need help with your purchase?' ) }{ ' ' }
+				{ translate( '{{contactLink}}Ask a Happiness Engineer{{/contactLink}}.', {
+					components: {
+						contactLink: (
+							<Button variant="link" onClick={ onClick } disabled={ isOpeningZendeskWidget } />
+						),
+					},
+				} ) }
+			</span>
+		</p>
+	);
+};
+
+export default CancelPurchaseSupportLink;
diff --git a/client/me/purchases/confirm-cancel-domain/index.jsx b/client/me/purchases/confirm-cancel-domain/index.jsx
index 60d976aada6d1..9d466fbf68baf 100644
--- a/client/me/purchases/confirm-cancel-domain/index.jsx
+++ b/client/me/purchases/confirm-cancel-domain/index.jsx
@@ -1,6 +1,6 @@
 import { isDomainRegistration } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
-import { Card, FormLabel } from '@automattic/components';
+import { Card, CompactCard, FormLabel } from '@automattic/components';
 import i18n, { getLocaleSlug, localize } from 'i18n-calypso';
 import { map, find } from 'lodash';
 import PropTypes from 'prop-types';
@@ -8,18 +8,17 @@ import { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import ActionPanelLink from 'calypso/components/action-panel/link';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
+import FormattedHeader from 'calypso/components/formatted-header';
 import FormButton from 'calypso/components/forms/form-button';
 import FormCheckbox from 'calypso/components/forms/form-checkbox';
-import FormSectionHeading from 'calypso/components/forms/form-section-heading';
 import FormSelect from 'calypso/components/forms/form-select';
 import FormTextarea from 'calypso/components/forms/form-textarea';
-import HeaderCake from 'calypso/components/header-cake';
+import HeaderCakeBack from 'calypso/components/header-cake/back';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { getName as getDomainName } from 'calypso/lib/purchases';
 import { cancelAndRefundPurchase } from 'calypso/lib/purchases/actions';
 import { cancelPurchase, purchasesRoot } from 'calypso/me/purchases/paths';
-import titles from 'calypso/me/purchases/titles';
 import TrackPurchasePageView from 'calypso/me/purchases/track-purchase-page-view';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
 import { clearPurchases } from 'calypso/state/purchases/actions';
@@ -193,12 +192,18 @@ class ConfirmCancelDomain extends Component {
 
 		return (
 			<div className="confirm-cancel-domain__help-message">
-				<p>{ selectedReason.helpMessage }</p>
-				{ selectedReason.showTextarea && (
-					<FormTextarea
-						className="confirm-cancel-domain__reason-details"
-						onChange={ this.onMessageChange }
-					/>
+				{ selectedReason.showTextarea ? (
+					<>
+						<p>{ selectedReason.helpMessage }</p>
+						<FormTextarea
+							className="confirm-cancel-domain__reason-details"
+							onChange={ this.onMessageChange }
+						/>
+					</>
+				) : (
+					<CompactCard className="confirm-cancel-domain__help-card" highlight="warning">
+						<span>{ selectedReason.helpMessage }</span>
+					</CompactCard>
 				) }
 			</div>
 		);
@@ -236,7 +241,7 @@ class ConfirmCancelDomain extends Component {
 		if ( this.state.submitting ) {
 			return (
 				<FormButton isPrimary disabled>
-					{ this.props.translate( 'Cancelling Domain…' ) }
+					{ this.props.translate( 'Cancelling domain…' ) }
 				</FormButton>
 			);
 		}
@@ -247,14 +252,14 @@ class ConfirmCancelDomain extends Component {
 		if ( selectedReason && 'misspelled' === selectedReason.value ) {
 			return (
 				<FormButton isPrimary onClick={ this.onSubmit } disabled={ ! confirmed }>
-					{ this.props.translate( 'Cancel Anyway' ) }
+					{ this.props.translate( 'Cancel anyway' ) }
 				</FormButton>
 			);
 		}
 
 		return (
 			<FormButton isPrimary onClick={ this.onSubmit } disabled={ ! confirmed }>
-				{ this.props.translate( 'Cancel Domain' ) }
+				{ this.props.translate( 'Cancel domain' ) }
 			</FormButton>
 		);
 	};
@@ -264,10 +269,7 @@ class ConfirmCancelDomain extends Component {
 			return (
 				<div>
 					<QueryUserPurchases />
-					<ConfirmCancelDomainLoadingPlaceholder
-						purchaseId={ this.props.purchaseId }
-						selectedSite={ this.props.selectedSite }
-					/>
+					<ConfirmCancelDomainLoadingPlaceholder />
 				</div>
 			);
 		}
@@ -285,18 +287,23 @@ class ConfirmCancelDomain extends Component {
 					path="/me/purchases/:site/:purchaseId/confirm-cancel-domain"
 					title="Purchases > Confirm Cancel Domain"
 				/>
-				<HeaderCake
-					backHref={ this.props.getCancelPurchaseUrlFor(
-						this.props.siteSlug,
-						this.props.purchaseId
-					) }
-				>
-					{ titles.confirmCancelDomain }
-				</HeaderCake>
-				<Card>
-					<FormSectionHeading>
-						{ this.props.translate( 'Canceling %(domain)s', { args: { domain } } ) }
-					</FormSectionHeading>
+
+				<Card className="confirm-cancel-domain__card">
+					<div className="confirm-cancel-domain__back">
+						<HeaderCakeBack
+							icon="chevron-left"
+							href={ this.props.getCancelPurchaseUrlFor(
+								this.props.siteSlug,
+								this.props.purchaseId
+							) }
+						/>
+					</div>
+					<FormattedHeader
+						className="confirm-cancel-domain__formatted-header"
+						brandFont
+						headerText={ this.props.translate( 'Canceling %(domain)s', { args: { domain } } ) }
+						align="left"
+					/>
 					<p>
 						{ this.props.translate(
 							'Since domain cancellation can cause your site to stop working, ' +
diff --git a/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx b/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx
index 8ef24697d31a0..d30a703276589 100644
--- a/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx
+++ b/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx
@@ -1,35 +1,15 @@
-import { Button, Card, CompactCard } from '@automattic/components';
+import { Card } from '@automattic/components';
 import { localize } from 'i18n-calypso';
-import PropTypes from 'prop-types';
-import LoadingPlaceholder from 'calypso/me/purchases/components/loading-placeholder';
-import { cancelPurchase } from 'calypso/me/purchases/paths';
-import titles from 'calypso/me/purchases/titles';
-
-const ConfirmCancelDomainLoadingPlaceholder = ( { purchaseId, selectedSite } ) => {
-	let path;
-
-	if ( selectedSite ) {
-		path = cancelPurchase( selectedSite.slug, purchaseId );
-	}
 
+const ConfirmCancelDomainLoadingPlaceholder = () => {
 	return (
-		<LoadingPlaceholder title={ titles.confirmCancelDomain } path={ path } isFullWidth>
-			<Card className="confirm-cancel-domain__loading-placeholder-card">
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-header" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-subheader" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-reason" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-reason" />
-			</Card>
-			<CompactCard>
-				<Button className="confirm-cancel-domain__loading-placeholder-cancel-button" />
-			</CompactCard>
-		</LoadingPlaceholder>
+		<Card className="confirm-cancel-domain__loading-placeholder-card">
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__header" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__subheader" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+		</Card>
 	);
 };
 
-ConfirmCancelDomainLoadingPlaceholder.propTypes = {
-	purchaseId: PropTypes.number.isRequired,
-	selectedSite: PropTypes.oneOfType( [ PropTypes.bool, PropTypes.object ] ),
-};
-
 export default localize( ConfirmCancelDomainLoadingPlaceholder );
diff --git a/client/me/purchases/confirm-cancel-domain/style.scss b/client/me/purchases/confirm-cancel-domain/style.scss
index 2da7aa42a8bee..503a6b29289a4 100644
--- a/client/me/purchases/confirm-cancel-domain/style.scss
+++ b/client/me/purchases/confirm-cancel-domain/style.scss
@@ -10,9 +10,24 @@
 	}
 }
 
+.confirm-cancel-domain__card {
+	padding: 32px;
+	padding-top: 12px;
+
+	.purchases__cancel-domain & {
+		box-shadow: none;
+		padding: 0;
+	}
+}
+
 .confirm-cancel-domain__help-message,
 .confirm-cancel-domain__confirm-container {
 	margin-top: 20px;
+
+	.form-label {
+		margin-top: 0;
+		margin-bottom: 1.5em;
+	}
 }
 
 .confirm-cancel-domain__reason-details {
diff --git a/client/me/purchases/controller.jsx b/client/me/purchases/controller.jsx
index bba589bf42ce1..76ee5f0fef346 100644
--- a/client/me/purchases/controller.jsx
+++ b/client/me/purchases/controller.jsx
@@ -79,8 +79,6 @@ export function cancelPurchase( context, next ) {
 		return (
 			<PurchasesWrapper title={ titles.cancelPurchase }>
 				<Main wideLayout className="purchases__cancel">
-					<NavigationHeader navigationItems={ [] } title={ titles.sectionTitle } />
-
 					<CancelPurchase
 						purchaseId={ parseInt( context.params.purchaseId, 10 ) }
 						siteSlug={ context.params.site }
@@ -105,8 +103,6 @@ export function confirmCancelDomain( context, next ) {
 		return (
 			<PurchasesWrapper title={ titles.confirmCancelDomain }>
 				<Main wideLayout className="purchases__cancel-domain confirm-cancel-domain">
-					<NavigationHeader navigationItems={ [] } title={ titles.sectionTitle } />
-
 					<ConfirmCancelDomain
 						purchaseId={ parseInt( context.params.purchaseId, 10 ) }
 						siteSlug={ context.params.site }
diff --git a/packages/calypso-products/src/plans-list.tsx b/packages/calypso-products/src/plans-list.tsx
index 298fa862c6a14..561d3c131f611 100644
--- a/packages/calypso-products/src/plans-list.tsx
+++ b/packages/calypso-products/src/plans-list.tsx
@@ -773,6 +773,12 @@ const getPlanBloggerDetails = (): IncompleteWPcomPlan => ( {
 	// Features not displayed but used for checking plan abilities
 	getIncludedFeatures: () => [ FEATURE_AUDIO_UPLOADS ],
 	getInferiorFeatures: () => [],
+	getCancellationFeatures: () => [
+		FEATURE_FAST_SUPPORT_FROM_EXPERTS,
+		FEATURE_AUDIO_UPLOADS,
+		FEATURE_NO_ADS,
+		FEATURE_MEMBERSHIPS,
+	],
 } );
 
 const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( {
@@ -932,6 +938,11 @@ const getPlanPersonalDetails = (): IncompleteWPcomPlan => ( {
 	// Features not displayed but used for checking plan abilities
 	getIncludedFeatures: () => [ FEATURE_AUDIO_UPLOADS ],
 	getInferiorFeatures: () => [],
+	getCancellationFeatures: () => [
+		FEATURE_FAST_SUPPORT_FROM_EXPERTS,
+		FEATURE_AD_FREE_EXPERIENCE,
+		FEATURE_AUDIO_UPLOADS,
+	],
 } );
 
 const getPlanEcommerceDetails = (): IncompleteWPcomPlan => ( {
@@ -1178,6 +1189,14 @@ const getPlanEcommerceDetails = (): IncompleteWPcomPlan => ( {
 		WPCOM_FEATURES_BACKUPS,
 	],
 	getInferiorFeatures: () => [],
+	getCancellationFeatures: () => [
+		FEATURE_ACCEPT_PAYMENTS_V2,
+		FEATURE_SHIPPING_CARRIERS,
+		FEATURE_ECOMMERCE_MARKETING,
+		FEATURE_SELL_SHIP,
+		FEATURE_PLUGINS_THEMES,
+		FEATURE_ADVANCED_SEO_TOOLS,
+	],
 } );
 
 const getWooExpressMediumPlanCompareFeatures = (): string[] => [
@@ -1541,6 +1560,13 @@ const getPlanPremiumDetails = (): IncompleteWPcomPlan => ( {
 		WPCOM_FEATURES_BACKUPS,
 	],
 	getInferiorFeatures: () => [],
+	getCancellationFeatures: () => [
+		FEATURE_FAST_SUPPORT_FROM_EXPERTS,
+		WPCOM_FEATURES_PREMIUM_THEMES_UNLIMITED,
+		FEATURE_STYLE_CUSTOMIZATION,
+		FEATURE_WORDADS_INSTANT,
+		FEATURE_AD_FREE_EXPERIENCE,
+	],
 } );
 
 const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( {
@@ -1882,6 +1908,15 @@ const getPlanBusinessDetails = (): IncompleteWPcomPlan => ( {
 			FEATURE_SENSEI_JETPACK,
 		] ),
 	getSenseiHighlightedFeatures: () => [ FEATURE_CUSTOM_DOMAIN, FEATURE_SENSEI_SUPPORT ],
+	getCancellationFeatures: () => [
+		FEATURE_PLUGINS_THEMES,
+		FEATURE_ADVANCED_SEO_TOOLS,
+		FEATURE_DEV_TOOLS,
+		FEATURE_SEAMLESS_STAGING_PRODUCTION_SYNCING,
+		FEATURE_SITE_BACKUPS_AND_RESTORE,
+		FEATURE_AD_FREE_EXPERIENCE,
+		FEATURE_FAST_SUPPORT_FROM_EXPERTS,
+	],
 } );
 
 const getPlanProDetails = (): IncompleteWPcomPlan => ( {
diff --git a/packages/calypso-products/src/types.ts b/packages/calypso-products/src/types.ts
index e074ad8223825..a14d0b0416d88 100644
--- a/packages/calypso-products/src/types.ts
+++ b/packages/calypso-products/src/types.ts
@@ -144,6 +144,7 @@ export interface WPComPlan extends Plan {
 	get2023PricingGridSignupWpcomFeatures?: () => Feature[];
 	getHostingSignupFeatures?: ( term?: Product[ 'term' ] ) => () => Feature[];
 	getHostingHighlightedFeatures?: () => Feature[];
+	getCancellationFeatures?: () => Feature[];
 }
 
 export type IncompleteWPcomPlan = Partial< WPComPlan > &