MSD Billing: Fix cancel skip link rendering and skip survey if already sent (#107193)

Author: chrismccluskey

client/dashboard/me/billing-purchases/cancel-purchase/cancel-purchase-form/index.tsx

@@ -418,14 +418,21 @@ export default function CancelPurchaseForm( props: CancelPurchaseFormProps ) {
 		const variant = surveyStep !== UPSELL_STEP ? 'primary' : 'secondary';
 
 		return (
-			<Button
-				disabled={ ! canGoNext() }
-				isBusy={ isCancelling }
-				onClick={ onSubmit }
-				variant={ variant }
-			>
-				{ __( 'Submit' ) }
-			</Button>
+			<ButtonStack justify="flex-start">
+				<Button
+					disabled={ ! canGoNext() }
+					isBusy={ isCancelling }
+					onClick={ onSubmit }
+					variant={ variant }
+				>
+					{ __( 'Submit' ) }
+				</Button>
+				{ ! canGoNext() && ! isCancelling && (
+					<Button variant="link" onClick={ onSubmit }>
+						{ __( 'Skip' ) }
+					</Button>
+				) }
+			</ButtonStack>
 		);
 	};
 

client/dashboard/me/billing-purchases/cancel-purchase/index.tsx

@@ -18,6 +18,7 @@ import {
 	siteLatestAtomicTransferQuery,
 	siteFeaturesQuery,
 	removePurchaseMutation,
+	userPreferenceQuery,
 } from '@automattic/api-queries';
 import config from '@automattic/calypso-config';
 import { localizeUrl } from '@automattic/i18n-utils';
@@ -77,6 +78,7 @@ import {
 	FEEDBACK_STEP,
 	NEXT_ADVENTURE_STEP,
 	OFFER_ACCEPTED_STEP,
+	REMOVE_PLAN_STEP,
 	UPSELL_STEP,
 } from './cancel-purchase-form/steps';
 import CancelPurchaseDomainOptions from './domain-options';
@@ -88,7 +90,12 @@ import MarketPlaceSubscriptionsDialog from './marketplace-subscriptions-dialog';
 import nextStep from './next-step';
 import CancelPurchaseRefundInformation from './refund-information';
 import type { CancelPurchaseState } from './types';
-import type { Purchase, MarketingSurveyDetails, PlanProduct } from '@automattic/api-core';
+import type {
+	Purchase,
+	MarketingSurveyDetails,
+	PlanProduct,
+	UserPreferences,
+} from '@automattic/api-core';
 import type { ChangeEvent } from 'react';
 import './style.scss';
 
@@ -113,6 +120,11 @@ export default function CancelPurchase() {
 		initialized: false,
 	} );
 	const { purchaseId } = cancelPurchaseRoute.useParams();
+	const getCancelPurchaseSurveyCompletedPreferenceKey = (
+		purchaseId: string | number
+	): keyof UserPreferences => {
+		return `cancel-purchase-survey-completed-${ purchaseId }`;
+	};
 
 	// Queries
 	const { data: purchase, isPending: purchaseQueryIsPending } = useSuspenseQuery(
@@ -150,14 +162,20 @@ export default function CancelPurchase() {
 	const { data: cancellationOffers } = useQuery(
 		cancellationOffersQuery( purchase.blog_id, purchase.ID )
 	);
+	const {
+		data: userHasCompletedCancelSurveyForPurchase,
+		isPending: userPreferencesQueryIsPending,
+	} = useQuery(
+		userPreferenceQuery( getCancelPurchaseSurveyCompletedPreferenceKey( purchase.ID ) )
+	);
 
 	// Mutations
 	const cancelAndRefundPurchaseMutate = useMutation( cancelAndRefundPurchaseMutation() );
 	const setPurchaseAutoRenewMutation = useMutation( userPurchaseSetAutoRenewQuery() );
 	const cancelAndRefundMutation = useMutation( cancelAndRefundPurchaseMutation() );
 	const removePurchaseMutator = useMutation( removePurchaseMutation() );
 	const extendWithFreeMonthMutation = useMutation( extendPurchaseWithFreeMonthMutation() );
-	const userPreferences = useMutation( userPreferencesMutation() );
+	const userPreferencesMutator = useMutation( userPreferencesMutation() );
 	const {
 		mutate: applyCancellationOffer,
 		isPending: isApplyingOffer,
@@ -199,7 +217,7 @@ export default function CancelPurchase() {
 				[ key ]: value,
 			},
 		};
-		userPreferences.mutate( payload );
+		userPreferencesMutator.mutate( payload );
 	};
 	const flowType = getPurchaseCancellationFlowType( purchase );
 
@@ -266,6 +284,7 @@ export default function CancelPurchase() {
 	const getAllSurveySteps = useCallback( () => {
 		let steps = [ FEEDBACK_STEP ];
 		const isJetpack = purchase.is_jetpack_plan_or_product;
+		const skipRemovePlanSurvey = purchase.is_plan && userHasCompletedCancelSurveyForPurchase;
 
 		if (
 			isPartnerPurchase( purchase ) &&
@@ -292,6 +311,16 @@ export default function CancelPurchase() {
 			steps.push( ATOMIC_REVERT_STEP );
 		}
 
+		if ( skipRemovePlanSurvey ) {
+			if ( steps.includes( FEEDBACK_STEP ) ) {
+				steps = steps.filter( ( step ) => step !== FEEDBACK_STEP );
+			}
+			if ( steps.includes( NEXT_ADVENTURE_STEP ) ) {
+				steps = steps.filter( ( step ) => step !== NEXT_ADVENTURE_STEP );
+			}
+			steps = [ REMOVE_PLAN_STEP, ...steps ];
+		}
+
 		return steps;
 	}, [
 		purchase,
@@ -346,7 +375,7 @@ export default function CancelPurchase() {
 			customerConfirmedUnderstanding: false,
 			domainConfirmationConfirmed: false,
 			initialized: true,
-			isLoading: true,
+			isLoading: REMOVE_PLAN_STEP !== firstStep,
 			isNextAdventureValid: false,
 			isSubmitting: false,
 			questionOneOrder,
@@ -360,7 +389,7 @@ export default function CancelPurchase() {
 			showDomainOptionsStep: false,
 			siteId: undefined,
 			solution: '',
-			surveyShown: false,
+			surveyShown: REMOVE_PLAN_STEP === firstStep,
 			surveyStep: firstStep,
 			upsell: '',
 			willAtomicSiteRevert: willAtomicSiteRevertAfterPurchaseDeactivation(
@@ -393,10 +422,6 @@ export default function CancelPurchase() {
 		setState( ( state ) => ( { ...state, isShowingMarketplaceSubscriptionsDialog: true } ) );
 	};
 
-	const getCancelPurchaseSurveyCompletedPreferenceKey = ( purchaseId: string | number ): string => {
-		return `cancel-purchase-survey-completed-${ purchaseId }`;
-	};
-
 	const cancelPurchaseSurveyCompleted = ( purchaseId: number ) => () => {
 		savePreference( getCancelPurchaseSurveyCompletedPreferenceKey( purchaseId ), true )();
 	};
@@ -1016,7 +1041,8 @@ export default function CancelPurchase() {
 		purchaseQueryIsPending ||
 		( Boolean( purchase.meta ) && domainQueryIsPending ) ||
 		siteLatestAtomicTransferQueryIsPending ||
-		productsQueryIsPending;
+		productsQueryIsPending ||
+		userPreferencesQueryIsPending;
 
 	const isDataValid = useCallback( () => {
 		if ( isDataLoading ) {