fix: Hide AppBanner during Launchpad flows (#79388)

Disables the app install banner when:

- visiting the Dashboard (home) section and launchpad_screen is "full".
- visiting Gutenberg and the showLaunchpad query parameter is "true".

client/blocks/app-banner/index.jsx

@@ -1,5 +1,6 @@
 import { Button, Card } from '@automattic/components';
 import { compose } from '@wordpress/compose';
+import { getQueryArg } from '@wordpress/url';
 import classNames from 'classnames';
 import { localize, withRtl } from 'i18n-calypso';
 import { get } from 'lodash';
@@ -64,14 +65,23 @@ export class AppBanner extends Component {
 	constructor( props ) {
 		super( props );
 
+		let isDraftPostModalShown = false;
 		if (
 			typeof window !== 'undefined' &&
 			window.sessionStorage?.getItem( 'wpcom_signup_complete_show_draft_post_modal' )
 		) {
-			this.state = { isDraftPostModalShown: true };
-		} else {
-			this.state = { isDraftPostModalShown: false };
+			isDraftPostModalShown = true;
 		}
+
+		let isLaunchpadEnabled = false;
+		if (
+			typeof window !== 'undefined' &&
+			getQueryArg( window.location.href, 'showLaunchpad' ) === 'true'
+		) {
+			isLaunchpadEnabled = true;
+		}
+
+		this.state = { isDraftPostModalShown, isLaunchpadEnabled };
 	}
 
 	stopBubblingEvents = ( event ) => {
@@ -194,7 +204,11 @@ export class AppBanner extends Component {
 	};
 
 	render() {
-		if ( ! this.props.shouldDisplayAppBanner || this.state.isDraftPostModalShown ) {
+		if (
+			! this.props.shouldDisplayAppBanner ||
+			this.state.isDraftPostModalShown ||
+			this.state.isLaunchpadEnabled
+		) {
 			return null;
 		}
 

client/blocks/app-banner/test/app-banner.jsx

@@ -2,8 +2,62 @@
  * @jest-environment jsdom
  */
 
-import { getiOSDeepLink, buildDeepLinkFragment } from 'calypso/blocks/app-banner';
-import { NOTES, READER, STATS, getCurrentSection } from 'calypso/blocks/app-banner/utils';
+import { isMobile } from '@automattic/viewport';
+import { screen, render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import AppBanner, { getiOSDeepLink, buildDeepLinkFragment } from 'calypso/blocks/app-banner';
+import {
+	GUTENBERG,
+	NOTES,
+	READER,
+	STATS,
+	getCurrentSection,
+} from 'calypso/blocks/app-banner/utils';
+
+jest.mock( '@automattic/viewport' );
+
+describe( 'when showing launchpad', () => {
+	let originalWindowLocation;
+	beforeAll( () => {
+		originalWindowLocation = window.location;
+		delete window.location;
+		isMobile.mockReturnValue( true );
+		window.location = {
+			href: 'https://wordpress.com/?showLaunchpad=true',
+		};
+	} );
+
+	afterAll( () => {
+		isMobile.mockRestore();
+		window.location = originalWindowLocation;
+	} );
+
+	test( 'renders nothing', () => {
+		const mockStore = configureStore();
+		const store = mockStore( {
+			ui: {
+				appBannerVisibility: true,
+				layoutFocus: {
+					current: 'not-sidebar',
+				},
+				section: {
+					name: GUTENBERG,
+				},
+			},
+			preferences: {
+				remoteValues: [ 'something' ],
+			},
+		} );
+		render(
+			<Provider store={ store }>
+				<AppBanner />
+			</Provider>
+		);
+
+		expect( screen.queryByText( 'Rich mobile publishing.' ) ).toBeNull();
+	} );
+} );
 
 describe( 'iOS deep link fragments', () => {
 	test( 'properly encodes tricky fragments', () => {

client/state/selectors/should-display-app-banner.ts

@@ -5,6 +5,7 @@ import {
 	APP_BANNER_DISMISS_TIMES_PREFERENCE,
 	ALLOWED_SECTIONS,
 	GUTENBERG,
+	HOME,
 	isDismissed,
 	getCurrentSection,
 } from 'calypso/blocks/app-banner/utils';
@@ -14,7 +15,8 @@ import { getPreference, hasReceivedRemotePreferences } from 'calypso/state/prefe
 import isNotificationsOpen from 'calypso/state/selectors/is-notifications-open';
 import { shouldDisplayTosUpdateBanner } from 'calypso/state/selectors/should-display-tos-update-banner';
 import { getCurrentFlowName } from 'calypso/state/signup/flow/selectors';
-import { getSectionName, appBannerIsEnabled } from 'calypso/state/ui/selectors';
+import { getSiteOption } from 'calypso/state/sites/selectors';
+import { getSectionName, appBannerIsEnabled, getSelectedSiteId } from 'calypso/state/ui/selectors';
 import { AppState } from 'calypso/types';
 
 /**
@@ -53,6 +55,13 @@ export const shouldDisplayAppBanner = ( state: AppState ): boolean | undefined =
 		return false;
 	}
 
+	// Do not show the banner if the user will be redirected to launchpad
+	const currentSiteId = getSelectedSiteId( state );
+	const launchpadScreen = getSiteOption( state, currentSiteId, 'launchpad_screen' );
+	if ( launchpadScreen === 'full' && HOME === currentSection ) {
+		return false;
+	}
+
 	if ( ! includes( ALLOWED_SECTIONS, currentSection ) ) {
 		return false;
 	}
@@ -66,6 +75,7 @@ export const shouldDisplayAppBanner = ( state: AppState ): boolean | undefined =
 export default createSelector( shouldDisplayAppBanner, [
 	shouldDisplayTosUpdateBanner,
 	appBannerIsEnabled,
+	getSelectedSiteId,
 	hasReceivedRemotePreferences,
 	getSectionName,
 	isNotificationsOpen,

client/state/selectors/test/should-display-app-banner.js

@@ -192,4 +192,62 @@ describe( 'shouldDisplayAppBanner()', () => {
 		const output = shouldDisplayAppBanner( state );
 		expect( output ).toBe( false );
 	} );
+
+	describe( 'when current section is HOME', () => {
+		test( 'should return false if launchpad_screen is "full"', () => {
+			const state = {
+				ui: {
+					appBannerVisibility: true,
+					layoutFocus: {
+						current: 'not-sidebar',
+					},
+					section: {
+						name: 'home',
+					},
+					selectedSiteId: 123,
+				},
+				preferences: {
+					remoteValues: [ 'something' ],
+				},
+				sites: {
+					items: {
+						123: {
+							options: { launchpad_screen: 'full' },
+						},
+					},
+				},
+			};
+			const output = shouldDisplayAppBanner( state );
+			expect( output ).toBe( false );
+		} );
+	} );
+
+	describe( 'when current section is not HOME', () => {
+		test( 'should return true if launchpad_screen is "full"', () => {
+			const state = {
+				ui: {
+					appBannerVisibility: true,
+					layoutFocus: {
+						current: 'not-sidebar',
+					},
+					section: {
+						name: 'gutenberg-editor',
+					},
+					selectedSiteId: 123,
+				},
+				preferences: {
+					remoteValues: [ 'something' ],
+				},
+				sites: {
+					items: {
+						123: {
+							options: { launchpad_screen: 'full' },
+						},
+					},
+				},
+			};
+			const output = shouldDisplayAppBanner( state );
+			expect( output ).toBe( true );
+		} );
+	} );
 } );