diff --git a/assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js b/assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js index d56e622791d..c3a7e73bb06 100644 --- a/assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js +++ b/assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js @@ -20,7 +20,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useCallback } from '@wordpress/element'; +import { useCallback, useState } from '@wordpress/element'; /** * Internal dependencies @@ -45,6 +45,8 @@ const NoticeWithIntersectionObserver = withIntersectionObserver( Notice ); export default function AnalyticsDisconnectedNotice() { const isViewOnly = useViewOnly(); + const [ inProgress, setInProgress ] = useState( false ); + const trackEvents = useNotificationEvents( EMAIL_REPORTING_ANALYTICS_DISCONNECTED_NOTICE ); @@ -74,6 +76,7 @@ export default function AnalyticsDisconnectedNotice() { ); const handleCTAClick = useCallback( () => { + setInProgress( true ); trackEvents.confirm(); activateAnalytics(); }, [ trackEvents, activateAnalytics ] ); @@ -115,6 +118,8 @@ export default function AnalyticsDisconnectedNotice() { ? undefined : { label: __( 'Connect Analytics', 'google-site-kit' ), + inProgress, + disabled: inProgress, onClick: handleCTAClick, } } diff --git a/assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js b/assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js index e9e7791c815..b94081ab894 100644 --- a/assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js +++ b/assets/js/components/email-reporting/notices/EmailReportingDisabledNotice.js @@ -56,12 +56,12 @@ export default function EmailReportingDisabledNotice() { EMAIL_REPORTING_DISABLED_NOTICE ); - // If the user is on the Admin Settings page already, then there - // will be no navigation when the "Edit settings" CTA is clicked, - // keeping the Settings Panel open. So we should close it. const { setValue } = useDispatch( CORE_UI ); const onCTAClick = useCallback( () => { trackEvents.confirm(); + // If the user is on the Admin Settings page already, then there + // will be no navigation when the "Edit settings" CTA is clicked, + // keeping the Settings Panel open. So we should close it. setValue( USER_SETTINGS_SELECTION_PANEL_OPENED_KEY, false ); }, [ setValue, trackEvents ] ); diff --git a/assets/js/components/email-reporting/notices/SetupAnalyticsNotice.js b/assets/js/components/email-reporting/notices/SetupAnalyticsNotice.js index 331cb6ceeef..c0e01376e51 100644 --- a/assets/js/components/email-reporting/notices/SetupAnalyticsNotice.js +++ b/assets/js/components/email-reporting/notices/SetupAnalyticsNotice.js @@ -20,7 +20,11 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { createInterpolateElement, useCallback } from '@wordpress/element'; +import { + createInterpolateElement, + useCallback, + useState, +} from '@wordpress/element'; /** * Internal dependencies @@ -40,6 +44,8 @@ export const EMAIL_REPORTING_SETUP_ANALYTICS_NOTICE_DISMISSED_ITEM = 'email-reporting-setup-analytics-notice'; export default function SetupAnalyticsNotice() { + const [ inProgress, setInProgress ] = useState( false ); + const isEmailReportingEnabled = useSelect( ( select ) => select( CORE_SITE ).isEmailReportingEnabled() ); @@ -66,6 +72,11 @@ export default function SetupAnalyticsNotice() { MODULE_SLUG_ANALYTICS_4 ); + const handleCTAClick = useCallback( () => { + setInProgress( true ); + activateAnalytics(); + }, [ activateAnalytics ] ); + const handleDismiss = useCallback( async () => { await dismissItem( EMAIL_REPORTING_SETUP_ANALYTICS_NOTICE_DISMISSED_ITEM @@ -110,7 +121,9 @@ export default function SetupAnalyticsNotice() { ) } ctaButton={ { label: __( 'Connect Analytics', 'google-site-kit' ), - onClick: activateAnalytics, + inProgress, + disabled: inProgress, + onClick: handleCTAClick, } } dismissButton={ { label: __( 'Maybe later', 'google-site-kit' ),