Enhance/#8134 - Implement the unhappy paths for the Setup CTA Banner

assets/js/components/ModalDialog.js

@@ -57,6 +57,7 @@ function ModalDialog( {
 	inProgress = false,
 	small = false,
 	medium = false,
+	buttonLink = null,
 } ) {
 	const instanceID = useInstanceId( ModalDialog );
 	const describedByID = `googlesitekit-dialog-description-${ instanceID }`;
@@ -125,14 +126,25 @@ function ModalDialog( {
 				>
 					{ __( 'Cancel', 'google-site-kit' ) }
 				</Button>
-				<SpinnerButton
-					onClick={ handleConfirm }
-					danger={ danger }
-					disabled={ inProgress }
-					isSaving={ inProgress }
-				>
-					{ confirmButton || __( 'Disconnect', 'google-site-kit' ) }
-				</SpinnerButton>
+				{ buttonLink ? (
+					<Button
+						href={ buttonLink }
+						target="_blank"
+						danger={ danger }
+					>
+						{ confirmButton }
+					</Button>
+				) : (
+					<SpinnerButton
+						onClick={ handleConfirm }
+						danger={ danger }
+						disabled={ inProgress }
+						isSaving={ inProgress }
+					>
+						{ confirmButton ||
+							__( 'Disconnect', 'google-site-kit' ) }
+					</SpinnerButton>
+				) }
 			</DialogFooter>
 		</Dialog>
 	);
@@ -150,6 +162,7 @@ ModalDialog.propTypes = {
 	danger: PropTypes.bool,
 	small: PropTypes.bool,
 	medium: PropTypes.bool,
+	buttonLink: PropTypes.string,
 };
 
 export default ModalDialog;

assets/js/components/PermissionsModal/AuthenticatedPermissionsModal.js

@@ -69,6 +69,8 @@ function AuthenticatedPermissionsModal() {
 		// If we have a datastores to snapshot before navigating away to the
 		// authorization page, do that first.
 		await snapshotAllStores( registry );
+
+		// Navigate to the authorization page.
 		navigateTo( connectURL );
 	}, [ registry, connectURL, navigateTo, permissionsError, setValues ] );
 

assets/js/components/notifications/ErrorNotifications.js

@@ -108,6 +108,12 @@ export default function ErrorNotifications() {
 		}
 	}
 
+	if (
+		temporaryPersistedPermissionsError?.data?.skipDefaultErrorNotifications
+	) {
+		return null;
+	}
+
 	return (
 		<Fragment>
 			<InternalServerError />

assets/js/components/notifications/SetupErrorNotification.js

@@ -27,6 +27,8 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from 'googlesitekit-data';
 import BannerNotification from './BannerNotification';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { CORE_FORMS } from '../../googlesitekit/datastore/forms/constants';
+import { FORM_TEMPORARY_PERSIST_PERMISSION_ERROR } from '../../googlesitekit/datastore/user/constants';
 
 export default function SetupErrorNotification() {
 	// These will be `null` if no errors exist.
@@ -37,7 +39,19 @@ export default function SetupErrorNotification() {
 		select( CORE_SITE ).getSetupErrorRedoURL()
 	);
 
-	if ( ! setupErrorMessage ) {
+	const { data: permissionsErrorData } = useSelect(
+		( select ) =>
+			select( CORE_FORMS ).getValue(
+				FORM_TEMPORARY_PERSIST_PERMISSION_ERROR,
+				'permissionsError'
+			) || {}
+	);
+
+	// If there's no setup error message or the temporary persisted permissions error has skipDefaultErrorNotifications flag set, return null.
+	if (
+		! setupErrorMessage ||
+		permissionsErrorData?.skipDefaultErrorNotifications
+	) {
 		return null;
 	}
 

assets/js/googlesitekit/datastore/site/info.js

@@ -47,6 +47,7 @@ const RECEIVE_SITE_INFO = 'RECEIVE_SITE_INFO';
 const RECEIVE_PERMALINK_PARAM = 'RECEIVE_PERMALINK_PARAM';
 const SET_SITE_KIT_AUTO_UPDATES_ENABLED = 'SET_SITE_KIT_AUTO_UPDATES_ENABLED';
 const SET_KEY_METRICS_SETUP_COMPLETED_BY = 'SET_KEY_METRICS_SETUP_COMPLETED_BY';
+const SET_SETUP_ERROR_CODE = 'SET_SETUP_ERROR_CODE';
 
 export const initialState = {
 	siteInfo: undefined,
@@ -126,6 +127,27 @@ export const actions = {
 			type: SET_KEY_METRICS_SETUP_COMPLETED_BY,
 		};
 	},
+
+	/**
+	 * Sets `setupErrorCode` value.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {string|null} setupErrorCode Error code from setup, or `null` if no error.
+	 * @return {Object} Redux-style action.
+	 */
+	setSetupErrorCode( setupErrorCode ) {
+		// setupErrorCode can be a string or null.
+		invariant(
+			typeof setupErrorCode === 'string' || setupErrorCode === null,
+			'setupErrorCode must be a string or null.'
+		);
+
+		return {
+			payload: { setupErrorCode },
+			type: SET_SETUP_ERROR_CODE,
+		};
+	},
 };
 
 export const controls = {};
@@ -228,6 +250,16 @@ export const reducer = ( state, { payload, type } ) => {
 				},
 			};
 
+		case SET_SETUP_ERROR_CODE:
+			const { setupErrorCode } = payload;
+			return {
+				...state,
+				siteInfo: {
+					...state.siteInfo,
+					setupErrorCode,
+				},
+			};
+
 		default: {
 			return state;
 		}

assets/js/googlesitekit/datastore/site/info.test.js

@@ -190,6 +190,44 @@ describe( 'core/site site info', () => {
 				);
 			} );
 		} );
+
+		describe( 'setSetupErrorCode', () => {
+			it( 'sets the `setupErrorCode` property', () => {
+				registry
+					.dispatch( CORE_SITE )
+					.setSetupErrorCode( 'error_code' );
+
+				expect( store.getState().siteInfo.setupErrorCode ).toBe(
+					'error_code'
+				);
+			} );
+
+			it( 'requires a string or null argument', () => {
+				expect( () => {
+					registry.dispatch( CORE_SITE ).setSetupErrorCode();
+				} ).toThrow( 'setupErrorCode must be a string or null.' );
+
+				expect( () => {
+					registry
+						.dispatch( CORE_SITE )
+						.setSetupErrorCode( undefined );
+				} ).toThrow( 'setupErrorCode must be a string or null.' );
+
+				expect( () => {
+					registry.dispatch( CORE_SITE ).setSetupErrorCode( true );
+				} ).toThrow( 'setupErrorCode must be a string or null.' );
+
+				expect( () => {
+					registry.dispatch( CORE_SITE ).setSetupErrorCode( 1 );
+				} ).toThrow( 'setupErrorCode must be a string or null.' );
+
+				expect( () => {
+					registry.dispatch( CORE_SITE ).setSetupErrorCode( null );
+
+					registry.dispatch( CORE_SITE ).setSetupErrorCode( 'error' );
+				} ).not.toThrow( 'setupErrorCode must be a string or null.' );
+			} );
+		} );
 	} );
 
 	describe( 'selectors', () => {

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceErrorModal.js

@@ -0,0 +1,149 @@
+/**
+ * Audience Segmentation AudienceErrorModal component.
+ *
+ * Site Kit by Google, Copyright 2024 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.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSelect } from 'googlesitekit-data';
+import Link from '../../../../../components/Link';
+import ModalDialog from '../../../../../components/ModalDialog';
+import Portal from '../../../../../components/Portal';
+import { CORE_SITE } from '../../../../../googlesitekit/datastore/site/constants';
+import { MODULES_ANALYTICS_4 } from '../../../datastore/constants';
+import { isInsufficientPermissionsError } from '../../../../../util/errors';
+
+export default function AudienceErrorModal( {
+	apiErrors,
+	hasOAuthError,
+	inProgress,
+	onCancel = () => {},
+	onRetry = () => {},
+} ) {
+	const errors = Array.isArray( apiErrors ) ? apiErrors : [ apiErrors ];
+
+	const helpLink = useSelect( ( select ) =>
+		select( CORE_SITE ).getErrorTroubleshootingLinkURL( {
+			code: 'analytics-4_insufficient_permissions',
+		} )
+	);
+
+	const requestAccessURL = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getServiceEntityAccessURL()
+	);
+
+	const errorTroubleshootingLinkURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getErrorTroubleshootingLinkURL( {
+			code: 'access_denied',
+		} )
+	);
+
+	if ( ! errors.length && ! hasOAuthError ) {
+		return null;
+	}
+
+	const hasInsufficientPermissionsError = errors.some( ( error ) =>
+		isInsufficientPermissionsError( error )
+	);
+
+	let title, description, confirmButton, buttonLink;
+
+	if ( hasOAuthError ) {
+		title = __( 'Analytics update failed', 'google-site-kit' );
+		description = createInterpolateElement(
+			__(
+				'Setup was interrupted because you did not grant the necessary permissions. <HelpLink />',
+				'google-site-kit'
+			),
+			{
+				HelpLink: (
+					<Link
+						href={ errorTroubleshootingLinkURL }
+						external
+						hideExternalIndicator
+					>
+						{ __( 'Get help', 'google-site-kit' ) }
+					</Link>
+				),
+			}
+		);
+		confirmButton = __( 'Retry', 'google-site-kit' );
+	} else if ( hasInsufficientPermissionsError ) {
+		title = __( 'Insufficient permissions', 'google-site-kit' );
+		description = createInterpolateElement(
+			__(
+				'You’ll need to contact your administrator. Trouble getting access? <HelpLink />',
+				'google-site-kit'
+			),
+			{
+				HelpLink: (
+					<Link href={ helpLink } external hideExternalIndicator>
+						{ __( 'Get help', 'google-site-kit' ) }
+					</Link>
+				),
+			}
+		);
+		confirmButton = __( 'Request access', 'google-site-kit' );
+		buttonLink = requestAccessURL;
+	} else {
+		title = __( 'Failed to set up visitor groups', 'google-site-kit' );
+		description = __(
+			'Oops! Something went wrong. Retry enabling groups.',
+			'google-site-kit'
+		);
+		confirmButton = __( 'Retry', 'google-site-kit' );
+	}
+
+	return (
+		<Portal>
+			<ModalDialog
+				dialogActive
+				buttonLink={ buttonLink }
+				title={ title }
+				subtitle={ description }
+				handleConfirm={ onRetry }
+				confirmButton={ confirmButton }
+				handleDialog={ onCancel }
+				danger
+				inProgress={ inProgress }
+			/>
+		</Portal>
+	);
+}
+
+AudienceErrorModal.propTypes = {
+	apiErrors: PropTypes.oneOfType( [
+		PropTypes.arrayOf( PropTypes.object ),
+		PropTypes.object,
+		PropTypes.array,
+	] ),
+	hasOAuthError: PropTypes.bool,
+	inProgress: PropTypes.bool,
+	onCancel: PropTypes.func,
+	onRetry: PropTypes.func,
+};