Fix in app purchase back link for recommend marketing extensions card (https://github.com/woocommerce/woocommerce-admin/pull/4301)

* Add getInAppPurchaseUrl lib function

* Implement getInAppPurchaseUrl for marketing tab

* Include the directory with the wccom-site param

* use getInAppPurchaseUrl helper function in onboarding CartModal component

* Fix 'addQueryArgs' is defined but never used

* Fix Missing JSDoc @return description

* Make connectNonce setting a global setting rather than a marketing once

Co-authored-by: Jason Conroy <jason@findingsimple.com>

plugins/woocommerce-admin/client/dashboard/components/cart-modal.js

@@ -5,7 +5,6 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { Button, Modal } from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
 import { find } from 'lodash';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -13,7 +12,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  * WooCommerce dependencies
  */
 import { getSetting } from '@woocommerce/wc-admin-settings';
-import { getNewPath } from '@woocommerce/navigation';
 import { List } from '@woocommerce/components';
 
 /**
@@ -23,6 +21,7 @@ import withSelect from 'wc-api/with-select';
 import { getProductIdsForCart } from 'dashboard/utils';
 import sanitizeHTML from 'lib/sanitize-html';
 import { recordEvent } from 'lib/tracks';
+import { getInAppPurchaseUrl } from 'lib/in-app-purchase';
 
 class CartModal extends Component {
 	constructor( props ) {
@@ -45,15 +44,8 @@ class CartModal extends Component {
 			purchase_install: true,
 		} );
 
-		const { connectNonce } = getSetting( 'onboarding', {} );
-		const backPath = getNewPath( {}, '/', {} );
-
-		const url = addQueryArgs( 'https://woocommerce.com/cart', {
-			'wccom-site': getSetting( 'siteUrl' ),
-			'wccom-woo-version': getSetting( 'wcVersion' ),
+		const url = getInAppPurchaseUrl( 'https://woocommerce.com/cart', {
 			'wccom-replace-with': productIds.join( ',' ),
-			'wccom-connect-nonce': connectNonce,
-			'wccom-back': backPath,
 		} );
 
 		if ( onClickPurchaseNow ) {

plugins/woocommerce-admin/client/lib/in-app-purchase.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * WooCommerce dependencies
+ */
+import { getSetting } from '@woocommerce/wc-admin-settings';
+
+/**
+ * Returns an in-app-purchase URL.
+ *
+ * @param {string} url
+ * @param {Object} queryArgs
+ * @return {string} url with in-app-purchase query parameters
+ */
+export const getInAppPurchaseUrl = ( url, queryArgs = {} ) => {
+	const { pathname, search } = window.location;
+	const connectNonce = getSetting( 'connectNonce', '' );
+	queryArgs = {
+		'wccom-site': getSetting( 'siteUrl' ),
+		// If the site is installed in a directory the directory must be included in the back param path.
+		'wccom-back': pathname + search,
+		'wccom-woo-version': getSetting( 'wcVersion' ),
+		'wccom-connect-nonce': connectNonce,
+		...queryArgs,
+	}
+
+	return addQueryArgs( url, queryArgs );
+}

plugins/woocommerce-admin/client/marketing/overview/recommended-extensions/item.js

@@ -3,7 +3,6 @@
  */
 import { Component } from '@wordpress/element';
 import PropTypes from 'prop-types';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -11,12 +10,7 @@ import { addQueryArgs } from '@wordpress/url';
 import './style.scss'
 import { ProductIcon } from '../../components/';
 import { recordEvent } from 'lib/tracks';
-
-/**
- * WooCommerce dependencies
- */
-import { getSetting } from '@woocommerce/wc-admin-settings';
-import { getNewPath } from '@woocommerce/navigation';
+import { getInAppPurchaseUrl } from 'lib/in-app-purchase';
 
 class RecommendedExtensionsItem extends Component {
 
@@ -28,15 +22,7 @@ class RecommendedExtensionsItem extends Component {
 	render() {
 		const { title, description, icon, url } = this.props;
 		const classNameBase = 'woocommerce-marketing-recommended-extensions-item';
-
-		const { connectNonce } = getSetting( 'marketing', {} );
-
-		const connectURL = addQueryArgs( url, {
-			'wccom-site': getSetting( 'siteUrl' ),
-			'wccom-back': '/wp-admin/' + getNewPath( {} ),
-			'wccom-woo-version': getSetting( 'wcVersion' ),
-			'wccom-connect-nonce': connectNonce,
-		} );
+		const connectURL = getInAppPurchaseUrl( url );
 
 		return (
 			<a href={ connectURL }

plugins/woocommerce-admin/src/Features/Marketing.php

@@ -108,7 +108,6 @@ class Marketing {
 		}
 
 		$settings['marketing']['installedExtensions'] = InstalledExtensions::get_data();
-		$settings['marketing']['connectNonce']        = wp_create_nonce( 'connect' );
 
 		return $settings;
 	}

plugins/woocommerce-admin/src/Features/Onboarding.php

@@ -484,7 +484,6 @@ class Onboarding {
 		if ( self::should_show_profiler() || self::should_show_tasks() ) {
 			$settings['onboarding']['stripeSupportedCountries'] = self::get_stripe_supported_countries();
 			$settings['onboarding']['euCountries']              = WC()->countries->get_european_union_countries();
-			$settings['onboarding']['connectNonce']             = wp_create_nonce( 'connect' );
 			$current_user                                       = wp_get_current_user();
 			$settings['onboarding']['userEmail']                = esc_html( $current_user->user_email );
 			$settings['onboarding']['productTypes']             = self::get_allowed_product_types();

plugins/woocommerce-admin/src/Loader.php

@@ -885,6 +885,7 @@ class Loader {
 		}
 
 		$settings['allowMarketplaceSuggestions'] = WC_Marketplace_Suggestions::allow_suggestions();
+		$settings['connectNonce']                = wp_create_nonce( 'connect' );
 
 		return $settings;
 	}