Merge pull request #6719 from google/enhance/#6539-update-ga4-activat…

…ion-banner

Enhance/#6539 - Update GA4 Activation Success Banner

assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SuccessBanner.js

@@ -32,8 +32,9 @@ import { __ } from '@wordpress/i18n';
 import Data from 'googlesitekit-data';
 import { CORE_SITE } from '../../../../../googlesitekit/datastore/site/constants';
 import BannerNotification from '../../../../../components/notifications/BannerNotification';
-import SuccessGreenSVG from '../../../../../../svg/graphics/success-green.svg';
+import SuccessGreenSVG from '../../../../../../svg/graphics/ga4-success-green.svg';
 import useViewContext from '../../../../../hooks/useViewContext';
+import { useFeature } from '../../../../../hooks/useFeature';
 import { trackEvent } from '../../../../../util/tracking';
 
 const { useSelect } = Data;
@@ -46,6 +47,20 @@ export default function SuccessBanner() {
 	const viewContext = useViewContext();
 	const eventCategory = `${ viewContext }_ga4-success-notification`;
 
+	const ga4ReportingEnabled = useFeature( 'ga4Reporting' );
+	let description;
+	if ( ga4ReportingEnabled ) {
+		description = __(
+			'Google Analytics 4 has started collecting data for your site. As soon there is enough data, you’ll be able to switch your Site Kit dashboard to show data from Google Analytics 4.',
+			'google-site-kit'
+		);
+	} else {
+		description = __(
+			'GA4 is collecting data for your site. You’ll only see Universal Analytics data on your dashboard for now.',
+			'google-site-kit'
+		);
+	}
+
 	useMount( () => {
 		trackEvent( eventCategory, 'view_notification' );
 	} );
@@ -57,15 +72,15 @@ export default function SuccessBanner() {
 				'You successfully set up your Google Analytics 4 property',
 				'google-site-kit'
 			) }
-			description={ __(
-				'GA4 is collecting data for your site. You’ll only see Universal Analytics data on your dashboard for now.',
+			description={ description }
+			dismiss={ __( 'OK, Got it', 'google-site-kit' ) }
+			WinImageSVG={ () => <SuccessGreenSVG /> }
+			format="small"
+			type="win-success"
+			learnMoreLabel={ __(
+				'Learn more about Google Analytics 4',
 				'google-site-kit'
 			) }
-			dismiss={ __( 'OK, Got it!', 'google-site-kit' ) }
-			WinImageSVG={ SuccessGreenSVG }
-			format="smaller"
-			type="win-success"
-			learnMoreLabel={ __( 'Learn more about GA4', 'google-site-kit' ) }
 			learnMoreURL={ ga4DocumentationLinkURL }
 		/>
 	);

assets/js/modules/analytics-4/components/dashboard/ActivationBanner/SuccessBanner.stories.js

@@ -27,20 +27,26 @@ const Template = () => <SuccessBanner />;
 
 export const Default = Template.bind( {} );
 Default.storyName = 'SuccessBanner';
-Default.decorators = [
-	( Story ) => {
-		const setupRegistry = ( registry ) => {
-			provideSiteInfo( registry );
-		};
 
-		return (
-			<WithRegistrySetup func={ setupRegistry }>
-				<Story />
-			</WithRegistrySetup>
-		);
-	},
-];
+export const WithGA4ReportingEnabled = Template.bind( {} );
+WithGA4ReportingEnabled.storyName = 'SuccessBanner with GA4 Reporting Enabled';
+WithGA4ReportingEnabled.parameters = {
+	features: [ 'ga4Reporting' ],
+};
 
 export default {
 	title: 'Modules/Analytics4/SuccessBanner',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				provideSiteInfo( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
 };