Remove plan: Skip survey (#94901)

Automattic · Oct 3, 2024 · dc9dd1d · dc9dd1d
1 parent 087bb81
commit dc9dd1d
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 32 deletions.
diff --git a/client/components/marketing-survey/cancel-purchase-form/index.jsx b/client/components/marketing-survey/cancel-purchase-form/index.jsx
@@ -19,7 +19,7 @@ import FormattedHeader from 'calypso/components/formatted-header';
 import InfoPopover from 'calypso/components/info-popover';
 import { withLocalizedMoment } from 'calypso/components/localized-moment';
 import { isAgencyPartnerType, isPartnerPurchase, isRefundable } from 'calypso/lib/purchases';
-import { submitSurvey } from 'calypso/lib/purchases/actions';
+import { cancelPurchaseSurveyCompleted, submitSurvey } from 'calypso/lib/purchases/actions';
 import wpcom from 'calypso/lib/wp';
 import useCheckPlanAvailabilityForPurchase from 'calypso/my-sites/plans-features-main/hooks/use-check-plan-availability-for-purchase';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
@@ -48,7 +48,13 @@ 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';
-import { ATOMIC_REVERT_STEP, FEEDBACK_STEP, UPSELL_STEP, NEXT_ADVENTURE_STEP } from './steps';
+import {
+	ATOMIC_REVERT_STEP,
+	FEEDBACK_STEP,
+	UPSELL_STEP,
+	NEXT_ADVENTURE_STEP,
+	REMOVE_PLAN_STEP,
+} from './steps';
 
 import './style.scss';
 
@@ -64,23 +70,21 @@ class CancelPurchaseForm extends Component {
 		cancelBundledDomain: PropTypes.bool,
 		includedDomainPurchase: PropTypes.object,
 		linkedPurchases: PropTypes.array,
+		skipRemovePlanSurvey: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		isVisible: false,
 	};
 
 	getAllSurveySteps() {
-		const { willAtomicSiteRevert, purchase } = this.props;
+		const { purchase, skipRemovePlanSurvey, willAtomicSiteRevert } = this.props;
 		let steps = [ FEEDBACK_STEP ];
 
-		if ( isPartnerPurchase( purchase ) && isAgencyPartnerType( purchase.partnerType ) ) {
-			/**
-			 * We don't want to display the cancellation survey for sites purchased
-			 * through partners (e.g., A4A.)
-			 *
-			 * Let's jump right to the confirmation step.
-			 */
+		if (
+			skipRemovePlanSurvey ||
+			( isPartnerPurchase( purchase ) && isAgencyPartnerType( purchase.partnerType ) )
+		) {
 			steps = [];
 		} else if ( ! isPlan( purchase ) ) {
 			steps = [ NEXT_ADVENTURE_STEP ];
@@ -94,6 +98,10 @@ class CancelPurchaseForm extends Component {
 			steps.push( ATOMIC_REVERT_STEP );
 		}
 
+		if ( skipRemovePlanSurvey && steps.length === 0 ) {
+			steps.push( REMOVE_PLAN_STEP );
+		}
+
 		return steps;
 	}
 
@@ -274,6 +282,8 @@ class CancelPurchaseForm extends Component {
 						isSubmitting: false,
 					} );
 				} );
+
+			this.props.cancelPurchaseSurveyCompleted( purchase.id );
 		}
 
 		this.props.onClickFinalConfirm();
@@ -331,6 +341,7 @@ class CancelPurchaseForm extends Component {
 			flowType,
 		} = this.props;
 		const { atomicRevertCheckOne, atomicRevertCheckTwo, surveyStep, upsell } = this.state;
+		const { productName } = purchase;
 
 		if ( surveyStep === FEEDBACK_STEP ) {
 			return (
@@ -514,6 +525,51 @@ class CancelPurchaseForm extends Component {
 				</div>
 			);
 		}
+
+		if ( surveyStep === REMOVE_PLAN_STEP ) {
+			return (
+				<div className="cancel-purchase-form__remove-plan">
+					<FormattedHeader
+						brandFont
+						headerText={ translate( 'Sorry to see you go' ) }
+						subHeaderText={
+							<>
+								<span className="cancel-purchase-form__remove-plan-text">
+									{
+										// Translators: %(planName)s: name of the plan being canceled, eg: "WordPress.com Business"
+										translate(
+											'If you remove your subscription, you will lose access to the features of the %(planName)s plan.',
+											{
+												args: {
+													planName: productName,
+												},
+											}
+										)
+									}
+								</span>
+								<span className="cancel-purchase-form__remove-plan-text">
+									{
+										// Translators: %(planName)s: name of the plan being canceled, eg: "WordPress.com Business". %(purchaseRenewalDate)s: date when the plan will expire, eg: "January 1, 2022"
+										translate(
+											'If you keep your subscription, you will be able to continue using your %(planName)s plan features until {{strong}}%(purchaseRenewalDate)s{{/strong}}.',
+											{
+												args: {
+													planName: productName,
+													purchaseRenewalDate: moment( purchase.expiryDate ).format( 'LL' ),
+												},
+												components: {
+													strong: <strong className="is-highlighted" />,
+												},
+											}
+										)
+									}
+								</span>
+							</>
+						}
+					/>
+				</div>
+			);
+		}
 	}
 
 	closeDialog = () => {
@@ -615,19 +671,41 @@ class CancelPurchaseForm extends Component {
 			);
 		}
 
+		if ( surveyStep === REMOVE_PLAN_STEP ) {
+			return (
+				<>
+					<GutenbergButton
+						className="cancel-purchase-form__remove-plan-button"
+						isPrimary
+						isBusy={ isCancelling }
+						disabled={ ! this.canGoNext() }
+						onClick={ this.onSubmit }
+					>
+						{ this.getFinalActionText() }
+					</GutenbergButton>
+					<GutenbergButton
+						isSecondary
+						isBusy={ isCancelling }
+						disabled={ ! this.canGoNext() }
+						onClick={ this.closeDialog }
+					>
+						{ translate( 'Keep plan' ) }
+					</GutenbergButton>
+				</>
+			);
+		}
+
 		return (
-			<>
-				<GutenbergButton
-					isPrimary={ surveyStep !== UPSELL_STEP }
-					isSecondary={ surveyStep === UPSELL_STEP }
-					isDefault={ surveyStep !== UPSELL_STEP }
-					isBusy={ isCancelling }
-					disabled={ ! this.canGoNext() }
-					onClick={ this.onSubmit }
-				>
-					{ this.getFinalActionText() }
-				</GutenbergButton>
-			</>
+			<GutenbergButton
+				isPrimary={ surveyStep !== UPSELL_STEP }
+				isSecondary={ surveyStep === UPSELL_STEP }
+				isDefault={ surveyStep !== UPSELL_STEP }
+				isBusy={ isCancelling }
+				disabled={ ! this.canGoNext() }
+				onClick={ this.onSubmit }
+			>
+				{ this.getFinalActionText() }
+			</GutenbergButton>
 		);
 	};
 
@@ -780,6 +858,7 @@ const ConnectedCancelPurchaseForm = connect(
 		hasBackupsFeature: siteHasFeature( state, purchase.siteId, WPCOM_FEATURES_BACKUPS ),
 	} ),
 	{
+		cancelPurchaseSurveyCompleted,
 		fetchAtomicTransfer,
 		recordTracksEvent,
 		submitSurvey,

diff --git a/client/components/marketing-survey/cancel-purchase-form/steps.js b/client/components/marketing-survey/cancel-purchase-form/steps.js
@@ -4,3 +4,4 @@ export const FINAL_STEP = 'final_step';
 export const INITIAL_STEP = 'initial_step';
 export const UPSELL_STEP = 'upsell_step';
 export const NEXT_ADVENTURE_STEP = 'next_adventure_step';
+export const REMOVE_PLAN_STEP = 'remove_plan_step';
diff --git a/client/components/marketing-survey/cancel-purchase-form/style.scss b/client/components/marketing-survey/cancel-purchase-form/style.scss
@@ -22,11 +22,17 @@
 }
 
 .cancel-purchase-form__feedback,
-.cancel-purchase-form__atomic-revert {
+.cancel-purchase-form__atomic-revert,
+.cancel-purchase-form__remove-plan {
 	max-width: 730px;
 	margin: 0 auto 2rem;
 }
 
+.cancel-purchase-form__remove-plan .formatted-header__subtitle {
+	max-width: 290px;
+	margin: 0 auto;
+}
+
 .cancel-purchase-form__feedback-questions {
 	max-width: 540px;
 	margin: 0 auto;
@@ -49,13 +55,6 @@
 		}
 	}
 
-	strong.is-highlighted {
-		background-color: var(--studio-yellow-5);
-		padding: 0.25rem 0.5rem;
-		border-radius: 5px; /* stylelint-disable-line scales/radii */
-		color: var(--stugio-gray-80);
-	}
-
 	.components-base-control__field {
 		background-color: var(--studio-white);
 		padding: 0.8125rem 1.25rem;
@@ -85,6 +84,16 @@
 	}
 }
 
+.cancel-purchase-form__atomic-revert,
+.cancel-purchase-form__remove-plan {
+	strong.is-highlighted {
+		background-color: var(--studio-yellow-5);
+		padding: 0.25rem 0.5rem;
+		border-radius: 5px; /* stylelint-disable-line scales/radii */
+		color: var(--stugio-gray-80);
+	}
+}
+
 .info-popover.cancel-purchase-form__atomic-revert-more-info {
 	vertical-align: middle;
 }
@@ -348,3 +357,15 @@
 		margin: 0.75rem 0;
 	}
 }
+
+.cancel-purchase-form__remove-plan-text {
+	display: block;
+
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+	}
+}
+
+.cancel-purchase-form__remove-plan-button {
+	margin-right: 1rem;
+}
diff --git a/client/lib/purchases/actions.js b/client/lib/purchases/actions.js
@@ -1,6 +1,8 @@
 import debugFactory from 'debug';
 import wpcom from 'calypso/lib/wp';
+import { getCancelPurchaseSurveyCompletedPreferenceKey } from 'calypso/me/purchases/utils';
 import { errorNotice } from 'calypso/state/notices/actions';
+import { savePreference } from 'calypso/state/preferences/actions';
 
 const debug = debugFactory( 'calypso:purchases:actions' );
 
@@ -60,6 +62,10 @@ export const submitSurvey = ( surveyName, siteId, surveyData ) => ( dispatch ) =
 		.catch( ( err ) => debug( err ) ); // shouldn't get here
 };
 
+export const cancelPurchaseSurveyCompleted = ( purchaseId ) => ( dispatch ) => {
+	savePreference( getCancelPurchaseSurveyCompletedPreferenceKey( purchaseId ), true )( dispatch );
+};
+
 export function disableAutoRenew( purchaseId, onComplete ) {
 	wpcom.req.post( `/upgrades/${ purchaseId }/disable-auto-renew`, ( error, data ) => {
 		debug( error, data );

diff --git a/client/me/purchases/manage-purchase/index.tsx b/client/me/purchases/manage-purchase/index.tsx
@@ -116,6 +116,7 @@ import {
 	getCurrentUserId,
 } from 'calypso/state/current-user/selectors';
 import { errorNotice, successNotice } from 'calypso/state/notices/actions';
+import { getPreference } from 'calypso/state/preferences/selectors';
 import { getProductsList } from 'calypso/state/products-list/selectors';
 import {
 	getSitePurchases,
@@ -145,6 +146,7 @@ import {
 	isJetpackTemporarySitePurchase,
 	isAkismetTemporarySitePurchase,
 	isMarketplaceTemporarySitePurchase,
+	getCancelPurchaseSurveyCompletedPreferenceKey,
 } from '../utils';
 import PurchaseNotice from './notices';
 import PurchasePlanDetails from './plan-details';
@@ -185,6 +187,7 @@ export interface ManagePurchaseConnectedProps {
 	hasLoadedDomains?: boolean;
 	hasLoadedPurchasesFromServer: boolean;
 	hasLoadedSites: boolean;
+	hasCompletedCancelPurchaseSurvey: boolean | null;
 	hasNonPrimaryDomainsFlag?: boolean;
 	hasSetupAds?: boolean;
 	isAtomicSite?: boolean | null;
@@ -643,6 +646,7 @@ class ManagePurchase extends Component<
 			hasLoadedSites,
 			hasNonPrimaryDomainsFlag,
 			hasCustomPrimaryDomain,
+			hasCompletedCancelPurchaseSurvey,
 			site,
 			purchase,
 			purchaseListUrl,
@@ -656,9 +660,10 @@ class ManagePurchase extends Component<
 			return null;
 		}
 
+		const isPlanPurchase = isPlan( purchase );
 		let text = translate( 'Remove subscription' );
 
-		if ( isPlan( purchase ) ) {
+		if ( isPlanPurchase ) {
 			text = translate( 'Remove plan' );
 		} else if ( isDomainRegistration( purchase ) ) {
 			text = translate( 'Remove domain' );
@@ -676,6 +681,7 @@ class ManagePurchase extends Component<
 				purchase={ purchase }
 				purchaseListUrl={ purchaseListUrl ?? purchasesRoot }
 				linkIcon="chevron-right"
+				skipRemovePlanSurvey={ isPlanPurchase && hasCompletedCancelPurchaseSurvey }
 			>
 				<MaterialIcon icon="delete" className="card__icon" />
 				{ text }
@@ -1625,6 +1631,10 @@ export default connect( ( state: IAppState, props: ManagePurchaseProps ) => {
 		hasSetupAds: Boolean(
 			site?.options?.wordads || isRequestingWordAdsApprovalForSite( state, site )
 		),
+		hasCompletedCancelPurchaseSurvey: getPreference(
+			state,
+			getCancelPurchaseSurveyCompletedPreferenceKey( purchase?.id )
+		),
 		isAtomicSite: isSiteAtomic( state, siteId ),
 		isDomainOnlySite: purchase && isDomainOnly( state, purchase.siteId ),
 		isProductOwner,

diff --git a/client/me/purchases/remove-purchase/index.jsx b/client/me/purchases/remove-purchase/index.jsx
@@ -64,6 +64,7 @@ class RemovePurchase extends Component {
 		activeSubscriptions: PropTypes.array,
 		linkIcon: PropTypes.string,
 		primaryDomain: PropTypes.object,
+		skipRemovePlanSurvey: PropTypes.bool,
 	};
 
 	static defaultProps = {
@@ -285,7 +286,7 @@ class RemovePurchase extends Component {
 	}
 
 	renderPlanDialog() {
-		const { purchase, activeSubscriptions } = this.props;
+		const { activeSubscriptions, purchase, skipRemovePlanSurvey } = this.props;
 
 		return (
 			<CancelPurchaseForm
@@ -296,6 +297,7 @@ class RemovePurchase extends Component {
 				onClose={ this.closeDialog }
 				onClickFinalConfirm={ this.removePurchase }
 				flowType={ CANCEL_FLOW_TYPE.REMOVE }
+				skipRemovePlanSurvey={ skipRemovePlanSurvey }
 			/>
 		);
 	}

diff --git a/client/me/purchases/utils.js b/client/me/purchases/utils.js
@@ -66,12 +66,17 @@ function isJetpackTemporarySitePurchase( purchase ) {
 	return isTemporarySitePurchase( purchase ) && productType === 'jetpack';
 }
 
+function getCancelPurchaseSurveyCompletedPreferenceKey( purchaseId ) {
+	return `cancel-purchase-survey-completed-${ purchaseId }`;
+}
+
 export {
 	canEditPaymentDetails,
 	getChangePaymentMethodPath,
 	getAddNewPaymentMethodPath,
 	isDataLoading,
 	isTemporarySitePurchase,
+	getCancelPurchaseSurveyCompletedPreferenceKey,
 	getTemporarySiteType,
 	isJetpackTemporarySitePurchase,
 	isAkismetTemporarySitePurchase,