Allow one click upsell for the plan upgrade nudge (#47774)

* Allow one click upsell for plan upgrade nudge * Dynamically resolve product slug based on the upsell type and upgraded item if applicable * Map correct reciept id to be shown in thank you page * Remove merge conflict * Remove duplicate import and other merge conflicts Co-authored-by: Niranjan Uma Shankar <[email protected]>
Automattic · Dec 22, 2020 · a68f9dc · a68f9dc
1 parent 9796c27
commit a68f9dc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/client/my-sites/checkout/checkout/index.jsx b/client/my-sites/checkout/checkout/index.jsx
@@ -237,7 +237,7 @@ export class Checkout extends React.Component {
 		}
 	}
 
-	getCheckoutCompleteRedirectPath = ( shouldHideUpsellNudges = false ) => {
+	getCheckoutCompleteRedirectPath = ( shouldHideUpsellNudges = false, currentRecieptId ) => {
 		// TODO: Cleanup and simplify this function.
 		// I wouldn't be surprised if it doesn't work as intended in some scenarios.
 		// Especially around the Concierge / Checklist logic.
@@ -285,15 +285,19 @@ export class Checkout extends React.Component {
 			}
 		}
 
-		// Note: this function is called early on for redirect-type payment methods, when the receipt isn't set yet.
-		// The `:receiptId` string is filled in by our callback page after the PayPal checkout
 		let pendingOrReceiptId;
-
-		if ( get( stepResult, 'receipt_id', false ) ) {
+		if ( currentRecieptId && ! isNaN( currentRecieptId ) ) {
+			//The relevant receipt Id can be passed in by the checkoutComplete
+			//command whenever applicable and takes highest precedence
+			//Specially used in one click upsell (i.e. calypso/my-sites/checkout/upsell-nudge/purchase-modal/util.js::onComplete callback)
+			pendingOrReceiptId = currentRecieptId;
+		} else if ( get( stepResult, 'receipt_id', false ) ) {
 			pendingOrReceiptId = stepResult.receipt_id;
 		} else if ( get( stepResult, 'orderId', false ) ) {
 			pendingOrReceiptId = 'pending/' + stepResult.orderId;
 		} else {
+			// Note: this function is called early on for redirect-type payment methods, when the receipt isn't set yet.
+			// The `:receiptId` string is filled in by our callback page after the PayPal checkout
 			pendingOrReceiptId = this.props.purchaseId ? this.props.purchaseId : ':receiptId';
 		}
 
@@ -377,7 +381,7 @@ export class Checkout extends React.Component {
 		window.location.href = redirectUrl;
 	}
 
-	handleCheckoutCompleteRedirect = ( shouldHideUpsellNudges = false ) => {
+	handleCheckoutCompleteRedirect = ( shouldHideUpsellNudges = false, currentRecieptId ) => {
 		let product;
 		let purchasedProducts;
 		let renewalItem;
@@ -391,7 +395,10 @@ export class Checkout extends React.Component {
 			translate,
 		} = this.props;
 
-		const redirectPath = this.getCheckoutCompleteRedirectPath( shouldHideUpsellNudges );
+		const redirectPath = this.getCheckoutCompleteRedirectPath(
+			shouldHideUpsellNudges,
+			currentRecieptId
+		);
 		const destinationFromCookie = retrieveSignupDestination();
 
 		this.props.clearPurchases();

diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx
@@ -233,8 +233,12 @@ export class UpsellNudge extends React.Component {
 
 	isEligibleForOneClickUpsell = ( buttonAction ) => {
 		const { cards, siteSlug, upsellType } = this.props;
-		const supportedUpsellTypes = [ 'concierge-quickstart-session', 'premium-plan-upgrade-upsell' ];
 
+		const supportedUpsellTypes = [
+			CONCIERGE_QUICKSTART_SESSION,
+			PREMIUM_PLAN_UPGRADE_UPSELL,
+			BUSINESS_PLAN_UPGRADE_UPSELL,
+		];
 		if ( 'accept' !== buttonAction || ! supportedUpsellTypes.includes( upsellType ) ) {
 			return false;
 		}
@@ -251,8 +255,8 @@ export class UpsellNudge extends React.Component {
 		return true;
 	};
 
-	handleOneClickUpsellComplete = () => {
-		this.props.handleCheckoutCompleteRedirect( true );
+	handleOneClickUpsellComplete = ( currentRecieptId ) => {
+		this.props.handleCheckoutCompleteRedirect( true, currentRecieptId );
 	};
 
 	renderPurchaseModal = () => {

diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js
@@ -68,7 +68,7 @@ export function useSubmitTransaction( {
 					persistent: true,
 				} );
 				recordTracksEvent( 'calypso_oneclick_upsell_payment_success', {} );
-				onComplete?.();
+				onComplete?.( data?.receipt_id );
 			}
 		} );
 	}, [ cart, storedCard, setStep, onClose, onComplete, successMessage ] );