Add educational content to the cancellation flow (#69950)

* Fix wrong plan cost and refund.

* Fix a bug that actionButtonUrl doesn't work

* Open a livechat directly with a dummy text

* Show the cancellation reason in LiveChat

* Add educational content to the cancellation flow

* Add a link for a domain support doc

* Update images and content

* Reduce the gap above the CTA

* Visual update

* Reduce the header font size

* Fix a typo; fix visual style of a link

* Add a missing symbol.

* Improve LiveChat

* Fix CI errors

Author: taggon

apps/happychat/src/happychat.jsx

@@ -56,6 +56,7 @@ function ParentConnection( { chatStatus, timeline, geoLocation } ) {
 								calypsoSectionName: 'gutenberg-editor',
 								wpcomSiteId: message.siteId?.toString(),
 								wpcomSitePlan: message.planSlug,
+								...( message.extraFields || {} ),
 							} )
 						);
 						dispatch(

client/assets/images/cancellation/connect-domain.png

@@ -25,6 +25,10 @@ export type UpsellType =
 	| 'live-chat:plugins'
 	| 'live-chat:themes'
 	| 'live-chat:domains'
+	| 'education:loading-time'
+	| 'education:seo'
+	| 'education:free-domain'
+	| 'education:domain-connection'
 	| 'upgrade-atomic';
 
 /**
@@ -89,10 +93,15 @@ export function getUpsellType( reason: string, opts: UpsellOptions ): UpsellType
 				return '';
 			}
 			return 'upgrade-atomic';
-
+		case 'seoIssues':
+			return 'education:seo';
+		case 'loadingTime':
+			return 'education:loading-time';
 		case 'didNotGetFreeDomain':
-		case 'otherDomainIssues':
+			return 'education:free-domain';
 		case 'domainConnection':
+			return 'education:domain-connection';
+		case 'otherDomainIssues':
 			return liveChatSupported ? 'live-chat:domains' : '';
 	}
 

client/assets/images/cancellation/free-domain.png

@@ -47,6 +47,7 @@ import {
 	nextAdventureOptionsForPurchase,
 } from './options-for-product';
 import PrecancellationChatButton from './precancellation-chat-button';
+import EducationContentStep from './step-components/educational-content-step';
 import FeedbackStep from './step-components/feedback-step';
 import NextAdventureStep from './step-components/next-adventure-step';
 import UpsellStep from './step-components/upsell-step';
@@ -311,7 +312,7 @@ class CancelPurchaseForm extends Component {
 	surveyContent() {
 		const { atomicTransfer, translate, isImport, moment, purchase, site, hasBackupsFeature } =
 			this.props;
-		const { atomicRevertCheckOne, atomicRevertCheckTwo, surveyStep } = this.state;
+		const { atomicRevertCheckOne, atomicRevertCheckTwo, surveyStep, upsell } = this.state;
 
 		if ( surveyStep === FEEDBACK_STEP ) {
 			return (
@@ -330,6 +331,17 @@ class CancelPurchaseForm extends Component {
 			const allSteps = this.getAllSurveySteps();
 			const isLastStep = surveyStep === allSteps[ allSteps.length - 1 ];
 
+			if ( upsell.startsWith( 'education:' ) ) {
+				return (
+					<EducationContentStep
+						type={ upsell }
+						site={ site }
+						onDecline={ isLastStep ? this.onSubmit : this.clickNext }
+						cancellationReason={ this.state.questionOneText }
+					/>
+				);
+			}
+
 			return (
 				<UpsellStep
 					upsell={ this.state.upsell }