Merge pull request #12843 from google/enhancement/12790-sec-admin-splash

Update the splash screen copy for secondary administrators.

Author: techanvil

assets/js/components/setup/SetupUsingProxyWithSignIn/Splash.js

@@ -45,6 +45,9 @@ import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 
 export default function Splash( { children } ) {
 	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
+	const setupFlowRefreshPhase4Enabled = useFeature(
+		'setupFlowRefreshPhase4'
+	);
 
 	const analyticsModuleAvailable = useSelect( ( select ) =>
 		select( CORE_MODULES ).isModuleAvailable( MODULE_SLUG_ANALYTICS_4 )
@@ -55,6 +58,9 @@ export default function Splash( { children } ) {
 	const isSecondAdmin = useSelect( ( select ) =>
 		select( CORE_SITE ).hasConnectedAdmins()
 	);
+	const hasViewableModules = useSelect(
+		( select ) => !! select( CORE_USER ).getViewableModules()?.length
+	);
 	const siteURL = useSelect( ( select ) =>
 		select( CORE_SITE ).getReferenceSiteURL()
 	);
@@ -98,15 +104,30 @@ export default function Splash( { children } ) {
 
 		getHelpURL = changedURLHelpLink;
 	} else if ( isSecondAdmin ) {
-		title = __(
-			'Connect your Google account to Site Kit',
-			'google-site-kit'
-		);
-		description = __(
-			'Site Kit has already been configured by another admin of this site. To use Site Kit as well, sign in with your Google account which has access to Google services for this site (e.g. Google Analytics). Once you complete the 3 setup steps, you’ll see stats from all activated Google services.',
-			'google-site-kit'
-		);
-		showLearnMoreLink = true;
+		if ( setupFlowRefreshPhase4Enabled ) {
+			title = __( "Let's get started!", 'google-site-kit' );
+
+			description =
+				analyticsModuleActive && hasViewableModules
+					? __(
+							'Site Kit has already been configured by another admin of this site. To use Site Kit as well, sign in with your Google account which has access to Google services for this site (e.g. Google Analytics). Once you complete the setup, you’ll see stats from all connected Google services that are shared with you:',
+							'google-site-kit'
+					  )
+					: __(
+							'Site Kit has already been configured by another admin of this site. To use Site Kit as well, sign in with your Google account which has access to Google services for this site (e.g. Google Analytics). Once you complete the setup, you’ll see stats from all connected Google services.',
+							'google-site-kit'
+					  );
+		} else {
+			title = __(
+				'Connect your Google account to Site Kit',
+				'google-site-kit'
+			);
+			description = __(
+				'Site Kit has already been configured by another admin of this site. To use Site Kit as well, sign in with your Google account which has access to Google services for this site (e.g. Google Analytics). Once you complete the 3 setup steps, you’ll see stats from all activated Google services.',
+				'google-site-kit'
+			);
+			showLearnMoreLink = true;
+		}
 	} else if ( setupFlowRefreshEnabled ) {
 		title = __( 'Let’s get started!', 'google-site-kit' );
 	} else {

assets/js/components/setup/SetupUsingProxyWithSignIn/index-setupFlowRefresh.stories.js

@@ -252,6 +252,65 @@ WithAnalyticsActive.args = {
 };
 WithAnalyticsActive.scenario = {};
 
+export const SecondaryAdminAnalyticsNotActive = Template.bind( {} );
+SecondaryAdminAnalyticsNotActive.storyName =
+	'Secondary admin, Analytics not setup (setupFlowRefreshPhase4 enabled)';
+SecondaryAdminAnalyticsNotActive.args = {
+	setupRegistry: ( registry ) => {
+		provideSiteConnection( registry, {
+			hasConnectedAdmins: true,
+			hasMultipleAdmins: true,
+			resettable: false,
+		} );
+
+		provideModules( registry, [
+			{
+				slug: MODULE_SLUG_ANALYTICS_4,
+				active: false,
+				connected: false,
+			},
+		] );
+	},
+};
+SecondaryAdminAnalyticsNotActive.parameters = {
+	features: [ 'setupFlowRefresh', 'setupFlowRefreshPhase4' ],
+};
+SecondaryAdminAnalyticsNotActive.scenario = {};
+
+export const SecondaryAdminWithSharedServices = Template.bind( {} );
+SecondaryAdminWithSharedServices.storyName =
+	'Secondary admin with shared services (setupFlowRefreshPhase4 enabled)';
+SecondaryAdminWithSharedServices.args = {
+	setupRegistry: ( registry ) => {
+		provideSiteConnection( registry, {
+			hasConnectedAdmins: true,
+			hasMultipleAdmins: true,
+			resettable: false,
+		} );
+
+		provideUserCapabilities( registry, {
+			[ PERMISSION_AUTHENTICATE ]: true,
+			[ getMetaCapabilityPropertyName(
+				PERMISSION_READ_SHARED_MODULE_DATA,
+				MODULE_SLUG_ANALYTICS_4
+			) ]: true,
+		} );
+
+		provideModules( registry, [
+			{
+				slug: MODULE_SLUG_ANALYTICS_4,
+				active: true,
+				connected: true,
+				shareable: true,
+			},
+		] );
+	},
+};
+SecondaryAdminWithSharedServices.parameters = {
+	features: [ 'setupFlowRefresh', 'setupFlowRefreshPhase4' ],
+};
+SecondaryAdminWithSharedServices.scenario = {};
+
 export default {
 	title: 'Setup / Using Proxy With Sign-in and setupFlowRefresh enabled',
 	decorators: [

assets/js/components/setup/SetupUsingProxyWithSignIn/index.test.js

@@ -46,6 +46,7 @@ import {
 	muteFetch,
 	provideModuleRegistrations,
 	provideModules,
+	provideSiteConnection,
 	provideSiteInfo,
 	provideUserAuthentication,
 	provideUserCapabilities,
@@ -503,6 +504,97 @@ describe( 'SetupUsingProxyWithSignIn', () => {
 			).not.toBeInTheDocument();
 		} );
 
+		it( 'should show the correct title and description for a secondary admin when Analytics is not active with the setupFlowRefreshPhase4 feature flag enabled', async () => {
+			provideSiteConnection( registry, {
+				hasConnectedAdmins: true,
+				hasMultipleAdmins: true,
+			} );
+
+			registry.dispatch( CORE_MODULES ).receiveGetModules(
+				coreModulesFixture.map( ( module ) => {
+					if ( MODULE_SLUG_ANALYTICS_4 === module.slug ) {
+						return {
+							...module,
+							active: false,
+						};
+					}
+
+					return module;
+				} )
+			);
+
+			const { getByRole, getByText, queryByText, waitForRegistry } =
+				render( <SetupUsingProxyWithSignIn />, {
+					registry,
+					viewContext: VIEW_CONTEXT_SPLASH,
+					features: [ 'setupFlowRefresh', 'setupFlowRefreshPhase4' ],
+				} );
+
+			await waitForRegistry();
+
+			expect(
+				getByRole( 'heading', { name: "Let's get started!" } )
+			).toBeInTheDocument();
+
+			expect(
+				getByText(
+					/Once you complete the setup, you’ll see stats from all connected Google services\./
+				)
+			).toBeInTheDocument();
+
+			expect(
+				queryByText(
+					/all connected Google services that are shared with you:/
+				)
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should show the correct title and description for a secondary admin when Analytics is active and shared services are viewable with the setupFlowRefreshPhase4 feature flag enabled', async () => {
+			provideSiteConnection( registry, {
+				hasConnectedAdmins: true,
+				hasMultipleAdmins: true,
+			} );
+
+			registry.dispatch( CORE_MODULES ).receiveGetModules(
+				coreModulesFixture.map( ( module ) => {
+					if ( MODULE_SLUG_ANALYTICS_4 === module.slug ) {
+						return {
+							...module,
+							active: true,
+							shareable: true,
+						};
+					}
+
+					return module;
+				} )
+			);
+
+			registry.dispatch( CORE_USER ).receiveGetCapabilities( {
+				'googlesitekit_read_shared_module_data::["analytics-4"]': true,
+			} );
+
+			const { getByRole, getByText, waitForRegistry } = render(
+				<SetupUsingProxyWithSignIn />,
+				{
+					registry,
+					viewContext: VIEW_CONTEXT_SPLASH,
+					features: [ 'setupFlowRefresh', 'setupFlowRefreshPhase4' ],
+				}
+			);
+
+			await waitForRegistry();
+
+			expect(
+				getByRole( 'heading', { name: "Let's get started!" } )
+			).toBeInTheDocument();
+
+			expect(
+				getByText(
+					/all connected Google services that are shared with you:/
+				)
+			).toBeInTheDocument();
+		} );
+
 		it( 'should navigate to the proxy setup URL with Analytics re-auth redirect URL and `showProgress` query argument on CTA click if chosen to connect Analytics', async () => {
 			fetchMock.postOnce( initialSetupSettingsEndpoint, {
 				body: { settings: { isAnalyticsSetupComplete: false } },