Enhancement/9846 fpm setup banner error handling

assets/js/components/notifications/FirstPartyModeSetupBanner.js

@@ -71,12 +71,12 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 		select( CORE_NOTIFICATIONS ).isNotificationDismissed( id )
 	);
 
+	const { invalidateResolution } = useDispatch( CORE_NOTIFICATIONS );
+
 	const isDismissing = useSelect( ( select ) =>
 		select( CORE_USER ).isDismissingItem( id )
 	);
 
-	const { dismissNotification, invalidateResolution } =
-		useDispatch( CORE_NOTIFICATIONS );
 	const { setValue } = useDispatch( CORE_UI );
 
 	const learnMoreURL = useSelect( ( select ) => {
@@ -93,15 +93,17 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 
 	const onCTAClick = async () => {
 		setFirstPartyModeEnabled( true );
-		await saveFirstPartyModeSettings();
+		const { error } = await saveFirstPartyModeSettings();
+
+		if ( error ) {
+			return { error };
+		}
 
 		setValue( FPM_SHOW_SETUP_SUCCESS_NOTIFICATION, true );
 		invalidateResolution( 'getQueuedNotifications', [
 			viewContext,
 			NOTIFICATION_GROUPS.DEFAULT,
 		] );
-
-		dismissNotification( id );
 	};
 
 	const onDismiss = () => {
@@ -178,6 +180,9 @@ export default function FirstPartyModeSetupBanner( { id, Notification } ) {
 							'google-site-kit'
 						) }
 						onCTAClick={ onCTAClick }
+						ctaDismissOptions={ {
+							skipHidingFromQueue: false,
+						} }
 						dismissLabel={ __( 'Maybe later', 'google-site-kit' ) }
 						onDismiss={ onDismiss }
 						dismissOptions={ {

assets/js/components/notifications/FirstPartyModeSetupBanner.stories.js

@@ -36,6 +36,7 @@ import {
 } from '../../googlesitekit/notifications/datastore/constants';
 import { VIEW_CONTEXT_MAIN_DASHBOARD } from '../../googlesitekit/constants';
 import { FPM_SETUP_CTA_BANNER_NOTIFICATION } from '../../googlesitekit/notifications/constants';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 
 const NotificationWithComponentProps = withNotificationComponentProps(
 	FPM_SETUP_CTA_BANNER_NOTIFICATION
@@ -48,11 +49,59 @@ function Template() {
 export const Default = Template.bind();
 Default.storyName = 'FirstPartyModeSetupBanner';
 Default.scenario = {};
+Default.args = {
+	setupRegistry: () => {
+		fetchMock.post(
+			new RegExp( '^/google-site-kit/v1/core/site/data/fpm-settings' ),
+			{
+				body: JSON.stringify( {
+					isEnabled: true,
+					isFPMHealthy: true,
+					isScriptAccessEnabled: true,
+				} ),
+				status: 200,
+			}
+		);
+	},
+};
+
+export const ErrorOnCTAClick = Template.bind();
+ErrorOnCTAClick.storyName = 'ErrorOnCTAClick';
+ErrorOnCTAClick.scenario = {};
+ErrorOnCTAClick.args = {
+	setupRegistry: ( registry ) => {
+		fetchMock.post(
+			new RegExp( '^/google-site-kit/v1/core/site/data/fpm-settings' ),
+			{
+				body: JSON.stringify( {
+					code: 'test_error',
+					message: 'Test Error',
+					data: {
+						reason: 'test_reason',
+					},
+				} ),
+				status: 500,
+			}
+		);
+
+		registry.dispatch( CORE_SITE ).receiveError(
+			{
+				code: 'test_error',
+				message: 'Test Error',
+				data: {},
+			},
+			'notificationAction',
+			[ FPM_SETUP_CTA_BANNER_NOTIFICATION ]
+		);
+	},
+};
 
 export default {
 	title: 'Modules/FirstPartyMode/Dashboard/FirstPartyModeSetupBanner',
 	decorators: [
-		( Story ) => {
+		( Story, { args } ) => {
+			fetchMock.restore();
+
 			const setupRegistry = ( registry ) => {
 				provideModules( registry, [
 					{
@@ -87,6 +136,8 @@ export default {
 						status: 200,
 					}
 				);
+
+				args.setupRegistry?.( registry );
 			};
 
 			return (

assets/js/components/notifications/FirstPartyModeSetupBanner.test.js

@@ -247,6 +247,47 @@ describe( 'FirstPartyModeSetupBanner', () => {
 		} );
 	} );
 
+	it( 'should display the error when CTA is clicked', async () => {
+		fetchMock.postOnce( fpmSettingsEndpoint, {
+			body: JSON.stringify( {
+				code: 'test_error',
+				message: 'Test Error',
+				data: {
+					reason: 'test_reason',
+				},
+			} ),
+			status: 500,
+		} );
+
+		const { getByRole, getByText, waitForRegistry } = render(
+			<FPMBannerComponent />,
+			{
+				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD,
+			}
+		);
+
+		await waitForRegistry();
+
+		fetchMock.post( dismissItemEndpoint, {
+			body: JSON.stringify( [ FPM_SETUP_CTA_BANNER_NOTIFICATION ] ),
+			status: 200,
+		} );
+
+		fireEvent.click(
+			getByRole( 'button', {
+				name: 'Enable First-party mode',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( fetchMock ).toHaveFetched( fpmSettingsEndpoint );
+			expect( fetchMock ).not.toHaveFetched( dismissItemEndpoint );
+		} );
+
+		expect( getByText( 'Error: Test Error' ) ).toBeInTheDocument();
+	} );
+
 	it( 'should set FPM_SHOW_SETUP_SUCCESS_NOTIFICATION to true and invalidate the notifications queue resolution when the CTA button is clicked', async () => {
 		const { getByRole, waitForRegistry } = render( <FPMBannerComponent />, {
 			registry,

assets/js/googlesitekit/notifications/components/common/ActionsCTALinkDismiss.js

@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -33,8 +39,10 @@ export default function ActionsCTALinkDismiss( {
 	ctaLink,
 	ctaLabel,
 	onCTAClick,
+	ctaDismissOptions,
 	onDismiss = () => {},
 	dismissLabel = __( 'OK, Got it!', 'google-site-kit' ),
+	dismissOnCTAClick = true,
 	dismissExpires = 0,
 	dismissOptions = {},
 } ) {
@@ -45,24 +53,42 @@ export default function ActionsCTALinkDismiss( {
 	} );
 
 	return (
-		<div className={ className }>
-			<CTALink
-				id={ id }
-				ctaLink={ ctaLink }
-				ctaLabel={ ctaLabel }
-				onCTAClick={ onCTAClick }
-				dismissExpires={ dismissExpires }
-			/>
+		<Fragment>
+			<div className={ className }>
+				<CTALink
+					id={ id }
+					ctaLink={ ctaLink }
+					ctaLabel={ ctaLabel }
+					onCTAClick={ onCTAClick }
+					dismissOnCTAClick={ dismissOnCTAClick }
+					dismissExpires={ dismissExpires }
+					dismissOptions={ ctaDismissOptions }
+				/>
 
-			<Dismiss
-				id={ id }
-				primary={ false }
-				dismissLabel={ dismissLabel }
-				dismissExpires={ dismissExpires }
-				disabled={ isNavigatingToCTALink }
-				onDismiss={ onDismiss }
-				dismissOptions={ dismissOptions }
-			/>
-		</div>
+				<Dismiss
+					id={ id }
+					primary={ false }
+					dismissLabel={ dismissLabel }
+					dismissExpires={ dismissExpires }
+					disabled={ isNavigatingToCTALink }
+					onDismiss={ onDismiss }
+					dismissOptions={ dismissOptions }
+				/>
+			</div>
+		</Fragment>
 	);
 }
+
+ActionsCTALinkDismiss.propTypes = {
+	id: PropTypes.string,
+	className: PropTypes.string,
+	ctaLink: PropTypes.string,
+	ctaLabel: PropTypes.string,
+	onCTAClick: PropTypes.func,
+	onDismiss: PropTypes.func,
+	ctaDismissOptions: PropTypes.object,
+	dismissLabel: PropTypes.string,
+	dismissOnCTAClick: PropTypes.bool,
+	dismissExpires: PropTypes.number,
+	dismissOptions: PropTypes.object,
+};

assets/js/googlesitekit/notifications/components/common/CTALink.js

@@ -33,13 +33,16 @@ import { CORE_NOTIFICATIONS } from '../../datastore/constants';
 import { CORE_LOCATION } from '../../../datastore/location/constants';
 import useNotificationEvents from '../../hooks/useNotificationEvents';
 import { SpinnerButton } from 'googlesitekit-components';
+import { CORE_SITE } from '../../../datastore/site/constants';
 
 export default function CTALink( {
 	id,
 	ctaLink,
 	ctaLabel,
 	onCTAClick,
-	dismissExpires = -1,
+	dismissOnCTAClick = false,
+	dismissExpires = 0,
+	dismissOptions = { skipHidingFromQueue: true },
 } ) {
 	const [ isAwaitingCTAResponse, setIsAwaitingCTAResponse ] =
 		useState( false );
@@ -53,28 +56,39 @@ export default function CTALink( {
 			: false;
 	} );
 
+	const { clearError, receiveError } = useDispatch( CORE_SITE );
+
 	const { dismissNotification } = useDispatch( CORE_NOTIFICATIONS );
 	const { navigateTo } = useDispatch( CORE_LOCATION );
 
 	const handleCTAClick = async ( event ) => {
+		clearError( 'notificationAction', [ id ] );
+
 		event.persist();
 		if ( ! event.defaultPrevented && ctaLink ) {
 			event.preventDefault();
 		}
 
 		setIsAwaitingCTAResponse( true );
-		await onCTAClick?.( event );
+
+		const { error } = ( await onCTAClick?.( event ) ) || {};
+
 		if ( isMounted() ) {
 			setIsAwaitingCTAResponse( false );
 		}
 
+		if ( error ) {
+			receiveError( error, 'notificationAction', [ id ] );
+			return;
+		}
+
 		const ctaClickActions = [ trackEvents.confirm() ];
 
-		if ( dismissExpires >= 0 ) {
+		if ( dismissOnCTAClick ) {
 			ctaClickActions.push(
 				dismissNotification( id, {
+					...dismissOptions,
 					expiresInSeconds: dismissExpires,
-					skipHidingFromQueue: true,
 				} )
 			);
 		}
@@ -105,5 +119,7 @@ CTALink.propTypes = {
 	ctaLink: PropTypes.string,
 	ctaLabel: PropTypes.string,
 	onCTAClick: PropTypes.func,
+	dismissOnCTAClick: PropTypes.bool,
 	dismissExpires: PropTypes.number,
+	dismissOptions: PropTypes.object,
 };

assets/js/googlesitekit/notifications/components/common/Error.js

@@ -0,0 +1,53 @@
+/**
+ * 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 { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useDispatch, useSelect } from 'googlesitekit-data';
+import { CORE_SITE } from '../../../datastore/site/constants';
+import ErrorText from '../../../../components/ErrorText';
+
+export default function Error( { id } ) {
+	const ctaError = useSelect( ( select ) => {
+		return select( CORE_SITE ).getError( 'notificationAction', [ id ] );
+	} );
+
+	const { clearError } = useDispatch( CORE_SITE );
+
+	useEffect( () => {
+		return () => {
+			clearError( 'notificationAction', [ id ] );
+		};
+	}, [ clearError, id ] );
+
+	return ctaError ? <ErrorText message={ ctaError.message } /> : null;
+}
+
+// eslint-disable-next-line sitekit/acronym-case
+Error.propTypes = {
+	id: PropTypes.string,
+};

assets/js/googlesitekit/notifications/components/layout/NotificationWithSVG.js

@@ -28,6 +28,7 @@ import {
 	useBreakpoint,
 } from '../../../../hooks/useBreakpoint';
 import { Cell, Grid, Row } from '../../../../material-components';
+import Error from '../common/Error';
 
 export default function NotificationWithSVG( {
 	id,
@@ -77,6 +78,7 @@ export default function NotificationWithSVG( {
 
 											{ description }
 
+											<Error id={ id } />
 											{ actions }
 										</Cell>
 										<Cell