Merge branch 'develop' into enhancement/5798-add-global-data-helper

Author: techanvil

assets/blocks/reader-revenue-manager/contribute-with-google/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "google-site-kit/rrm-contribute-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Contribute with Google",
 	"category": "widgets",
 	"icon": "google",

assets/blocks/reader-revenue-manager/contribute-with-google/v3/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "google-site-kit/rrm-contribute-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Contribute with Google",
 	"category": "widgets",
 	"icon": "google",

assets/blocks/reader-revenue-manager/subscribe-with-google/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "google-site-kit/rrm-subscribe-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Subscribe with Google",
 	"category": "widgets",
 	"icon": "google",

assets/blocks/reader-revenue-manager/subscribe-with-google/v3/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "google-site-kit/rrm-subscribe-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Subscribe with Google",
 	"category": "widgets",
 	"icon": "google",

assets/blocks/sign-in-with-google/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "google-site-kit/sign-in-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Sign in with Google",
 	"category": "widgets",
 	"icon": "google",

assets/blocks/sign-in-with-google/v3/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "google-site-kit/sign-in-with-google",
-	"version": "1.180.0",
+	"version": "1.181.0",
 	"title": "Sign in with Google",
 	"category": "widgets",
 	"icon": "google",

assets/js/components/ActivateAnalyticsCTA.js

@@ -39,6 +39,9 @@ import { __ } from '@wordpress/i18n';
 import { Button, SpinnerButton } from 'googlesitekit-components';
 import { useDispatch, useSelect } from 'googlesitekit-data';
 import Link from '@/js/components/Link';
+import Typography from '@/js/components/Typography';
+import { SIZE_MEDIUM, TYPE_LABEL } from '@/js/components/Typography/constants';
+import P from '@/js/components/Typography/P';
 import { CORE_LOCATION } from '@/js/googlesitekit/datastore/location/constants';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
@@ -48,7 +51,10 @@ import useActivateModuleCallback from '@/js/hooks/useActivateModuleCallback';
 import useCompleteModuleActivationCallback from '@/js/hooks/useCompleteModuleActivationCallback';
 import { useDebounce } from '@/js/hooks/useDebounce';
 import { useFeature } from '@/js/hooks/useFeature';
-import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
+import {
+	ANALYTICS_SETUP_ERROR,
+	MODULE_SLUG_ANALYTICS_4,
+} from '@/js/modules/analytics-4/constants';
 import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
 import AnalyticsIcon from '@/svg/graphics/analytics.svg';
 
@@ -59,6 +65,9 @@ export default function ActivateAnalyticsCTA( {
 } ) {
 	const trackingRef = useRef();
 	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
+	const setupFlowRefreshPhase4Enabled = useFeature(
+		'setupFlowRefreshPhase4'
+	);
 
 	const trackEvents = useNotificationEvents(
 		'activate-analytics-cta',
@@ -102,6 +111,20 @@ export default function ActivateAnalyticsCTA( {
 		return select( CORE_SITE ).getDocumentationLinkURL( 'ga4' );
 	} );
 
+	const hasActivationError = useSelect( ( select ) => {
+		if ( ! setupFlowRefreshEnabled || ! setupFlowRefreshPhase4Enabled ) {
+			return false;
+		}
+
+		const internalServerError =
+			select( CORE_SITE ).getInternalServerError();
+
+		return (
+			! analyticsModuleActive &&
+			internalServerError?.id === ANALYTICS_SETUP_ERROR
+		);
+	} );
+
 	const [ inProgress, setInProgress ] = useState( false );
 
 	const isNavigatingToReauthURL = useSelect( ( select ) => {
@@ -140,10 +163,17 @@ export default function ActivateAnalyticsCTA( {
 	useEffect( () => {
 		if ( isActivating || isNavigatingToReauthURL ) {
 			setInProgress( true );
+		} else if ( hasActivationError ) {
+			setInProgress( false );
 		} else {
 			debouncedSetInProgress( false );
 		}
-	}, [ isActivating, isNavigatingToReauthURL, debouncedSetInProgress ] );
+	}, [
+		isActivating,
+		isNavigatingToReauthURL,
+		debouncedSetInProgress,
+		hasActivationError,
+	] );
 
 	const intersectionEntry = useIntersection( trackingRef, {
 		threshold: 0.25,
@@ -160,12 +190,23 @@ export default function ActivateAnalyticsCTA( {
 	}, [ inView, hasBeenInView, trackEvents, analyticsEventLabel ] );
 
 	const { dismissItem } = useDispatch( CORE_USER );
+	const { clearInternalServerError } = useDispatch( CORE_SITE );
 
 	function handleDismiss() {
 		trackEvents.dismiss( analyticsEventLabel );
 		dismissItem( dismissedItemSlug );
 	}
 
+	function handleActivationRetry() {
+		clearInternalServerError();
+		activateModuleCallback();
+		trackEvents.confirm( analyticsEventLabel );
+	}
+
+	function handleActivationErrorDismiss() {
+		clearInternalServerError();
+	}
+
 	const onClickCallback = analyticsModuleActive
 		? completeModuleActivationCallback
 		: activateModuleCallback;
@@ -208,6 +249,49 @@ export default function ActivateAnalyticsCTA( {
 		);
 	}
 
+	if ( hasActivationError ) {
+		return (
+			<div
+				className="googlesitekit-activate-analytics-cta googlesitekit-activate-analytics-cta--error"
+				ref={ trackingRef }
+			>
+				<div>
+					<Typography
+						type={ TYPE_LABEL }
+						size={ SIZE_MEDIUM }
+						as="h2"
+						className="googlesitekit-activate-analytics-cta__title"
+					>
+						{ __( 'Analytics setup failed', 'google-site-kit' ) }
+					</Typography>
+					<P className="googlesitekit-activate-analytics-cta__description">
+						{ __(
+							'Something went wrong, please try again',
+							'google-site-kit'
+						) }
+					</P>
+				</div>
+				<div className="googlesitekit-activate-analytics-cta__actions">
+					<Button
+						className="googlesitekit-activate-analytics-cta__button--secondary googlesitekit-activate-analytics-cta__dismiss-button--error"
+						onClick={ handleActivationErrorDismiss }
+						tertiary
+					>
+						{ __( 'Got it', 'google-site-kit' ) }
+					</Button>
+					<SpinnerButton
+						className="googlesitekit-activate-analytics-cta__button--primary"
+						onClick={ handleActivationRetry }
+						isSaving={ inProgress }
+						disabled={ inProgress }
+					>
+						{ __( 'Retry Analytics setup', 'google-site-kit' ) }
+					</SpinnerButton>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div
 			className="googlesitekit-activate-analytics-cta"

assets/js/components/ActivateAnalyticsCTA.stories.js

@@ -19,7 +19,9 @@
 /**
  * Internal dependencies
  */
+import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
+import { ANALYTICS_SETUP_ERROR } from '@/js/modules/analytics-4/constants';
 import {
 	provideModuleRegistrations,
 	provideModules,
@@ -59,6 +61,22 @@ WithSetupFlowRefreshCompleteSetup.parameters = {
 	features: [ 'setupFlowRefresh' ],
 };
 
+export const WithSetupFlowRefreshPhase4ActivationError = Template.bind( {} );
+WithSetupFlowRefreshPhase4ActivationError.storyName =
+	'Setup Flow Refresh Phase 4 - Activation Error';
+WithSetupFlowRefreshPhase4ActivationError.args = {
+	dismissedItemSlug: 'analytics-setup-cta-search-funnel',
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_SITE ).setInternalServerError( {
+			id: ANALYTICS_SETUP_ERROR,
+			description: 'This is an error',
+		} );
+	},
+};
+WithSetupFlowRefreshPhase4ActivationError.parameters = {
+	features: [ 'setupFlowRefresh', 'setupFlowRefreshPhase4' ],
+};
+
 export default {
 	title: 'Components/ActivateAnalyticsCTA',
 	component: ActivateAnalyticsCTA,
@@ -67,6 +85,10 @@ export default {
 			const analyticsActive = args?.isAnalyticsActive || false;
 
 			function setupRegistry( registry ) {
+				if ( args?.setupRegistry ) {
+					args.setupRegistry( registry );
+				}
+
 				provideModules( registry, [
 					{
 						slug: 'analytics-4',

assets/js/components/DashboardMainApp.js

@@ -89,9 +89,9 @@ import MetricsSelectionPanel from './KeyMetrics/MetricsSelectionPanel';
 import ModuleDashboardEffects from './ModuleDashboardEffects';
 import Notifications from './notifications/Notifications';
 import OfflineNotification from './notifications/OfflineNotification';
+import PDFDownloadButton from './pdf-export/PDFDownloadButton';
 import PDFExportRoot from './pdf-export/PDFExportRoot';
-import PDFDownloadButton from './pdf-generation/PDFDownloadButton';
-import PDFSectionsSelectionPanel from './pdf-generation/PDFSectionsSelectionPanel';
+import PDFSectionsSelectionPanel from './pdf-export/PDFSectionsSelectionPanel';
 import CurrentSurveyPortal from './surveys/CurrentSurveyPortal';
 import SurveyViewTrigger from './surveys/SurveyViewTrigger';
 import WelcomeModal from './WelcomeModal';

assets/js/components/DashboardNavigation/Navigation/index.js

@@ -231,30 +231,62 @@ export default function Navigation() {
 	// Handle scroll events to update sticky state and selected chip.
 	useEvent( 'scroll', throttledOnScroll );
 
+	const navigationChipIconSize = 20;
+
 	const chips = {
 		[ ANCHOR_ID_KEY_METRICS ]: {
 			label: __( 'Key metrics', 'google-site-kit' ),
-			icon: <NavKeyMetricsIcon width="18" height="16" />,
+			icon: (
+				<NavKeyMetricsIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 		[ ANCHOR_ID_TRAFFIC ]: {
 			label: __( 'Traffic', 'google-site-kit' ),
-			icon: <NavTrafficIcon width="18" height="16" />,
+			icon: (
+				<NavTrafficIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 		[ ANCHOR_ID_SITE_GOALS ]: {
 			label: __( 'Site goals', 'google-site-kit' ),
-			icon: <NavSiteGoalsIcon width="17" height="17" />,
+			icon: (
+				<NavSiteGoalsIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 		[ ANCHOR_ID_CONTENT ]: {
 			label: __( 'Content', 'google-site-kit' ),
-			icon: <NavContentIcon width="18" height="18" />,
+			icon: (
+				<NavContentIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 		[ ANCHOR_ID_SPEED ]: {
 			label: __( 'Speed', 'google-site-kit' ),
-			icon: <NavSpeedIcon width="20" height="16" />,
+			icon: (
+				<NavSpeedIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 		[ ANCHOR_ID_MONETIZATION ]: {
 			label: __( 'Monetization', 'google-site-kit' ),
-			icon: <NavMonetizationIcon width="18" height="16" />,
+			icon: (
+				<NavMonetizationIcon
+					width={ navigationChipIconSize }
+					height={ navigationChipIconSize }
+				/>
+			),
 		},
 	};