Add fallback for the select/dispatch data-controls for older WP versions (https://github.com/woocommerce/woocommerce-admin/pull/7204)

* Add fallback for the select/dispatch data-controls for older WP versions

* Also update dispatch in payment-gateways and rename oldDispatch to depreciatedDispatch

* Add comments

plugins/woocommerce-admin/packages/data/src/payment-gateways/resolvers.ts

@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { apiFetch } from '@wordpress/data-controls';
+import {
+	apiFetch,
+	dispatch as depreciatedDispatch,
+} from '@wordpress/data-controls';
 import { controls } from '@wordpress/data';
 
 /**
@@ -19,6 +22,10 @@ import {
 import { API_NAMESPACE, STORE_KEY } from './constants';
 import { PaymentGateway } from './types';
 
+// Can be removed in WP 5.9.
+const dispatch =
+	controls && controls.dispatch ? controls.dispatch : depreciatedDispatch;
+
 export function* getPaymentGateways() {
 	yield getPaymentGatewaysRequest();
 
@@ -28,7 +35,7 @@ export function* getPaymentGateways() {
 		} );
 		yield getPaymentGatewaysSuccess( response );
 		for ( let i = 0; i < response.length; i++ ) {
-			yield controls.dispatch(
+			yield dispatch(
 				STORE_KEY,
 				'finishResolution',
 				'getPaymentGateway',

plugins/woocommerce-admin/packages/data/src/plugins/actions.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import { apiFetch } from '@wordpress/data-controls';
+import {
+	apiFetch,
+	select,
+	dispatch as depreciatedDispatch,
+} from '@wordpress/data-controls';
 import { controls } from '@wordpress/data';
 import { _n, sprintf } from '@wordpress/i18n';
 
@@ -18,6 +22,12 @@ import {
 	SelectorKeysWithActions,
 } from './types';
 
+// Can be removed in WP 5.9, wp.data is supported in >5.7.
+const dispatch =
+	controls && controls.dispatch ? controls.dispatch : depreciatedDispatch;
+const resolveSelect =
+	controls && controls.resolveSelect ? controls.resolveSelect : select;
+
 type PluginsResponse< PluginData > = {
 	data: PluginData;
 	errors: WPError< PluginNames >;
@@ -235,8 +245,8 @@ export function* activatePlugins( plugins: string[] ) {
 
 export function* installAndActivatePlugins( plugins: string[] ) {
 	try {
-		yield controls.dispatch( STORE_NAME, 'installPlugins', plugins );
-		const activations: InstallPluginsResponse = yield controls.dispatch(
+		yield dispatch( STORE_NAME, 'installPlugins', plugins );
+		const activations: InstallPluginsResponse = yield dispatch(
 			STORE_NAME,
 			'activatePlugins',
 			plugins
@@ -248,25 +258,20 @@ export function* installAndActivatePlugins( plugins: string[] ) {
 }
 
 export const createErrorNotice = ( errorMessage: string ) => {
-	return controls.dispatch(
-		'core/notices',
-		'createNotice',
-		'error',
-		errorMessage
-	);
+	return dispatch( 'core/notices', 'createNotice', 'error', errorMessage );
 };
 
 export function* connectToJetpack(
 	getAdminLink: ( endpoint: string ) => string
 ) {
-	const url: string = yield controls.resolveSelect(
+	const url: string = yield resolveSelect(
 		STORE_NAME,
 		'getJetpackConnectUrl',
 		{
 			redirect_url: getAdminLink( 'admin.php?page=wc-admin' ),
 		}
 	);
-	const error: string = yield controls.resolveSelect(
+	const error: string = yield resolveSelect(
 		STORE_NAME,
 		'getPluginsError',
 		'getJetpackConnectUrl'
@@ -284,10 +289,10 @@ export function* installJetpackAndConnect(
 	getAdminLink: ( endpoint: string ) => string
 ) {
 	try {
-		yield controls.dispatch( STORE_NAME, 'installPlugins', [ 'jetpack' ] );
-		yield controls.dispatch( STORE_NAME, 'activatePlugins', [ 'jetpack' ] );
+		yield dispatch( STORE_NAME, 'installPlugins', [ 'jetpack' ] );
+		yield dispatch( STORE_NAME, 'activatePlugins', [ 'jetpack' ] );
 
-		const url: string = yield controls.dispatch(
+		const url: string = yield dispatch(
 			STORE_NAME,
 			'connectToJetpack',
 			getAdminLink
@@ -304,7 +309,7 @@ export function* connectToJetpackWithFailureRedirect(
 	getAdminLink: ( endpoint: string ) => string
 ) {
 	try {
-		const url: string = yield controls.dispatch(
+		const url: string = yield dispatch(
 			STORE_NAME,
 			'connectToJetpack',
 			getAdminLink

plugins/woocommerce-admin/packages/data/src/plugins/resolvers.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { apiFetch } from '@wordpress/data-controls';
+import { apiFetch, select } from '@wordpress/data-controls';
 import { controls } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -23,6 +23,9 @@ import {
 } from './actions';
 import { PaypalOnboardingStatus, RecommendedTypes } from './types';
 
+// Can be removed in WP 5.9, wp.data is supported in >5.7.
+const resolveSelect =
+	controls && controls.resolveSelect ? controls.resolveSelect : select;
 type PluginGetResponse = {
 	plugins: string[];
 } & Response;
@@ -116,7 +119,7 @@ function* setOnboardingStatusWithOptions() {
 		merchant_id_production: string;
 		client_id_production: string;
 		client_secret_production: string;
-	} = yield controls.resolveSelect(
+	} = yield resolveSelect(
 		OPTIONS_STORE_NAME,
 		'getOption',
 		'woocommerce-ppcp-settings'
@@ -139,7 +142,7 @@ export function* getPaypalOnboardingStatus() {
 
 	const errorData: {
 		data?: { status: number };
-	} = yield controls.resolveSelect(
+	} = yield resolveSelect(
 		STORE_NAME,
 		'getPluginsError',
 		'getPaypalOnboardingStatus'

plugins/woocommerce-admin/packages/data/src/settings/actions.js

@@ -3,7 +3,7 @@
  */
 
 import { __ } from '@wordpress/i18n';
-import { apiFetch } from '@wordpress/data-controls';
+import { apiFetch, select } from '@wordpress/data-controls';
 import { controls } from '@wordpress/data';
 import { concat } from 'lodash';
 
@@ -14,6 +14,10 @@ import { NAMESPACE } from '../constants';
 import { STORE_NAME } from './constants';
 import TYPES from './action-types';
 
+// Can be removed in WP 5.9, wp.data is supported in >5.7.
+const resolveSelect =
+	controls && controls.resolveSelect ? controls.resolveSelect : select;
+
 export function updateSettingsForGroup( group, data, time = new Date() ) {
 	return {
 		type: TYPES.UPDATE_SETTINGS_FOR_GROUP,
@@ -59,11 +63,7 @@ export function* persistSettingsForGroup( group ) {
 	// first dispatch the is persisting action
 	yield setIsRequesting( group, true );
 	// get all dirty keys with select control
-	const dirtyKeys = yield controls.resolveSelect(
-		STORE_NAME,
-		'getDirtyKeys',
-		group
-	);
+	const dirtyKeys = yield resolveSelect( STORE_NAME, 'getDirtyKeys', group );
 	// if there is nothing dirty, bail
 	if ( dirtyKeys.length === 0 ) {
 		yield setIsRequesting( group, false );
@@ -71,7 +71,7 @@ export function* persistSettingsForGroup( group ) {
 	}
 
 	// get data slice for keys
-	const dirtyData = yield controls.resolveSelect(
+	const dirtyData = yield resolveSelect(
 		STORE_NAME,
 		'getSettingsForGroup',
 		group,

plugins/woocommerce-admin/packages/data/src/settings/resolvers.js

@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { apiFetch } from '@wordpress/data-controls';
+import {
+	apiFetch,
+	dispatch as depreciatedDispatch,
+} from '@wordpress/data-controls';
 import { controls } from '@wordpress/data';
 
 /**
@@ -11,6 +14,10 @@ import { NAMESPACE } from '../constants';
 import { STORE_NAME } from './constants';
 import { updateSettingsForGroup, updateErrorForGroup } from './actions';
 
+// Can be removed in WP 5.9.
+const dispatch =
+	controls && controls.dispatch ? controls.dispatch : depreciatedDispatch;
+
 function settingsToSettingsResource( settings ) {
 	return settings.reduce( ( resource, setting ) => {
 		resource[ setting.id ] = setting.value;
@@ -19,7 +26,7 @@ function settingsToSettingsResource( settings ) {
 }
 
 export function* getSettings( group ) {
-	yield controls.dispatch( STORE_NAME, 'setIsRequesting', group, true );
+	yield dispatch( STORE_NAME, 'setIsRequesting', group, true );
 
 	try {
 		const url = NAMESPACE + '/settings/' + group;