/**
 * `getDataErrorComponent` function.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
import { getModulesData } from '../../util';
import { isInsufficientPermissionsError } from '../../util/errors';
import { getInsufficientPermissionsErrorDescription } from '../../util/insufficient-permissions-error-description';
import ErrorText from '../ErrorText';
import CTA from './cta';
import ctaWrapper from './cta-wrapper';
const { dispatch } = Data;

/**
 * Creates a CTA component when there's a data error. Different wrapper HTML is needed depending on where the CTA gets output, which is determined by the inGrid, fullWidth, and createGrid parameters.
 *
 * @since 1.0.0
 *
 * @param {string}  moduleSlug   Module slug.
 * @param {string}  errorMessage Description of error.
 * @param {boolean} inGrid       Creates layout to fit within an existing grid with 'cell' classes. Default is half-width grid cells. Default: false.
 * @param {boolean} fullWidth    Creates layout with 'cell--span-12' to be full width. Default: false.
 * @param {boolean} createGrid   Adds a full grid layout with padding. Default: false.
 * @param {Object}  errorObj     Error related data.
 * @return {WPElement} CTA component with data error message.
 */
function getDataErrorComponent( moduleSlug, errorMessage, inGrid = false, fullWidth = false, createGrid = false, errorObj = {} ) {
	const modulesData = getModulesData();
	const module = modulesData[ moduleSlug ];

	/* translators: %s: module name */
	let title = sprintf( __( 'Data error in %s', 'google-site-kit' ), module?.name );
	let message = errorMessage;

	if ( isInsufficientPermissionsError( errorObj ) ) {
		/* translators: %s: module name */
		title = sprintf( __( 'Insufficient permissions in %s', 'google-site-kit' ), module?.name );
		message = getInsufficientPermissionsErrorDescription( message, module );
	}

	const reconnectURL = errorObj?.data?.reconnectURL;
	const description = reconnectURL ? <ErrorText message={ message } reconnectURL={ reconnectURL } /> : message;
	const cta = <CTA title={ title } description={ description } error />;

	// This is to handle token expired error specifically.
	if ( 'Invalid Credentials' === errorMessage ) {
		dispatch( CORE_SITE ).setInternalServerError( {
			id: 'token-notification',
			title: __( 'Security Token Error', 'google-site-kit' ),
			description: __( 'We’re unable to retrieve your data because your security token is expired or revoked.', 'google-site-kit' ),
			learnMoreURL: global._googlesitekitLegacyData.admin.connectURL,
			learnMoreLabel: __( 'Please reauthenticate your account', 'google-site-kit' ),
		} );
	}

	return ctaWrapper( cta, inGrid, fullWidth, createGrid );
}

export default getDataErrorComponent;

@@ -650,16 +650,93 @@
 e.%0A */%0A%0A
+/**%0A * External dependencies%0A */%0Aimport %7B useEffectOnce %7D from 'react-use';%0A%0A
 /**%0A * W
@@ -749,32 +749,32 @@
 ss dependencies%0A
-
  */%0Aimport %7B __,
@@ -951,24 +951,98 @@
 constants';%0A
+import %7B CORE_USER %7D from '../../googlesitekit/datastore/user/constants';%0A
 import %7B get
@@ -1369,17 +1369,31 @@
 const %7B 
-d
+useSelect, useD
 ispatch 
@@ -2978,21 +2978,20 @@
 essage;%0A
-%09cons
+%0A%09le
 t cta = 
@@ -3161,30 +3161,223 @@
 %7B%0A%09%09
-dispatch( CORE_SITE ).
+const CTAWithErrorEffect = () =%3E %7B%0A%09%09%09const connectURL = useSelect( ( select ) =%3E select( CORE_USER ).getConnectURL() );%0A%09%09%09const %7B setInternalServerError %7D = useDispatch( CORE_SITE );%0A%09%09%09useEffectOnce( () =%3E %7B%0A%09%09%09%09
 setI
@@ -3398,16 +3398,18 @@
 rror( %7B%0A
+%09%09
 %09%09%09id: '
@@ -3432,16 +3432,18 @@
 on',%0A%09%09%09
+%09%09
 title: _
@@ -3490,16 +3490,18 @@
 kit' ),%0A
+%09%09
 %09%09%09descr
@@ -3621,24 +3621,26 @@
 -kit' ),%0A%09%09%09
+%09
+%09
 learnMoreURL
@@ -3645,46 +3645,8 @@
 RL: 
-global._googlesitekitLegacyData.admin.
 conn
@@ -3653,16 +3653,18 @@
 ectURL,%0A
+%09%09
 %09%09%09learn
@@ -3741,15 +3741,79 @@
  ),%0A
+%09%09
 %09%09%7D );%0A
+%09%09%09%7D );%0A%0A%09%09%09return cta;%0A%09%09%7D;%0A%0A%09%09cta = %3CCTAWithErrorEffect /%3E;%0A
 %09%7D%0A%0A

Update getDataErrorComponent to use the anonymous component approach.