Jetpack Connect: adapt the post-checkout Thank you modal to specific …

…Products (#40863)

* Remove redundant prop fro the CurrentPlan component.

Information about the product itself is needed now
that there is more than 1 product. With this change,
we no longer need the indicator variable.

* Checkout: for Jetpack products we need to pass product info as a parameter.

Not inluding this information causes Free or generic
Thank you modal to be displayed after purchasing at /connect
plans landing grid.

* Plans: adapt f-n calls to new redirect signature.

client/jetpack-connect/plans.jsx

@@ -97,7 +97,7 @@ class Plans extends Component {
 		const { canPurchasePlans, selectedSiteSlug } = this.props;
 
 		if ( selectedSiteSlug && canPurchasePlans ) {
-			return this.redirect( CALYPSO_MY_PLAN_PAGE, { 'thank-you': '' } );
+			return this.redirect( CALYPSO_MY_PLAN_PAGE, null, { 'thank-you': '' } );
 		}
 
 		return this.redirect( CALYPSO_REDIRECTION_PAGE );
@@ -129,9 +129,13 @@ class Plans extends Component {
 		return addQueryArgs( args, redirectTo );
 	}
 
-	redirect( path, args ) {
+	redirect( path, product, args ) {
 		let redirectTo = path + this.props.selectedSiteSlug;
 
+		if ( product ) {
+			redirectTo += '/' + product;
+		}
+
 		if ( args ) {
 			redirectTo = addQueryArgs( args, redirectTo );
 		}
@@ -171,8 +175,7 @@ class Plans extends Component {
 		addItem( cartItem );
 		this.props.completeFlow();
 		persistSignupDestination( this.getMyPlansDestination() );
-
-		this.redirect( '/checkout/' );
+		this.redirect( '/checkout/', cartItem.product_slug );
 	};
 
 	shouldShowPlaceholder() {

client/my-sites/checkout/checkout/index.jsx

@@ -387,7 +387,6 @@ export class Checkout extends React.Component {
 
 		const isCartEmpty = isEmpty( getAllCartItems( cart ) );
 		const isReceiptEmpty = ':receiptId' === pendingOrReceiptId;
-
 		// We will show the Thank You page if there's a site slug and either one of the following is true:
 		// - has a receipt number
 		// - does not have a receipt number but has an item in cart(as in the case of paying with a redirect payment type)
@@ -477,9 +476,11 @@ export class Checkout extends React.Component {
 		// Especially around the Concierge / Checklist logic.
 
 		let renewalItem,
+			signupDestination,
 			displayModeParam = {};
 		const {
 			cart,
+			product,
 			redirectTo,
 			selectedSite,
 			selectedSiteSlug,
@@ -530,8 +531,13 @@ export class Checkout extends React.Component {
 
 		this.setDestinationIfEcommPlan( pendingOrReceiptId );
 
-		const signupDestination =
-			retrieveSignupDestination() || this.getFallbackDestination( pendingOrReceiptId );
+		// if it is a Jetpack product, use product info as a parameter
+		if ( product ) {
+			signupDestination = this.getFallbackDestination( pendingOrReceiptId );
+		} else {
+			signupDestination =
+				retrieveSignupDestination() || this.getFallbackDestination( pendingOrReceiptId );
+		}
 
 		if ( hasRenewalItem( cart ) ) {
 			renewalItem = getRenewalItems( cart )[ 0 ];
@@ -838,6 +844,7 @@ export class Checkout extends React.Component {
 
 	render() {
 		const { plan, product, purchaseId, selectedFeature, selectedSiteSlug } = this.props;
+
 		let analyticsPath = '';
 		let analyticsProps = {};
 		if ( purchaseId && product ) {

client/my-sites/plans/current-plan/controller.jsx

@@ -30,15 +30,9 @@ export function currentPlan( context, next ) {
 
 	const product = context.query.product;
 	const requestThankYou = context.query.hasOwnProperty( 'thank-you' );
-	const requestProduct = context.query.hasOwnProperty( 'product' );
 
 	context.primary = (
-		<CurrentPlan
-			path={ context.path }
-			product={ product }
-			requestThankYou={ requestThankYou }
-			requestProduct={ requestProduct }
-		/>
+		<CurrentPlan path={ context.path } product={ product } requestThankYou={ requestThankYou } />
 	);
 
 	next();

client/my-sites/plans/current-plan/index.jsx

@@ -78,17 +78,17 @@ class CurrentPlan extends Component {
 	}
 
 	renderThankYou() {
-		const { currentPlan, product, requestProduct } = this.props;
+		const { currentPlan, product } = this.props;
 
-		if ( requestProduct && startsWith( product, 'jetpack_backup' ) ) {
+		if ( startsWith( product, 'jetpack_backup' ) ) {
 			return <BackupProductThankYou />;
 		}
 
-		if ( requestProduct && startsWith( product, 'jetpack_scan' ) ) {
+		if ( startsWith( product, 'jetpack_scan' ) ) {
 			return <ScanProductThankYou />;
 		}
 
-		if ( requestProduct && startsWith( product, 'jetpack_search' ) ) {
+		if ( startsWith( product, 'jetpack_search' ) ) {
 			return <SearchProductThankYou />;
 		}