Consolidate accounts onboarding: Automatically preselect a Google Ads account when there is only one, as well as adjust the UI presentation

js/src/components/ads-account-select-control/index.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AppSelectControl from '.~/components/app-select-control';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+
+/**
+ * @param {Object} props The component props
+ * @param {string} [props.value] The selected value. IF no value is defined, then the first option is selected and onChange function is triggered.
+ * @param {Function} [props.onChange] Callback when the select value changes.
+ * @return {JSX.Element} An enhanced AppSelectControl component.
+ */
+const AdsAccountSelectControl = ( {
+	value,
+	onChange = () => {},
+	...props
+} ) => {
+	const { existingAccounts: accounts = [] } = useExistingGoogleAdsAccounts();
+
+	const options = accounts.map( ( acc ) => ( {
+		value: acc.id,
+		label: sprintf(
+			// translators: 1: account name, 2: account ID.
+			__( '%1$s (%2$s)', 'google-listings-and-ads' ),
+			acc.name,
+			acc.id
+		),
+	} ) );
+
+	useEffect( () => {
+		// Triggers the onChange event in order to pre-select the initial value
+		if ( value === undefined ) {
+			onChange( options[ 0 ]?.value );
+		}
+	}, [ options, onChange, value ] );
+
+	return (
+		<AppSelectControl
+			options={ options }
+			onChange={ onChange }
+			selectSingleValue
+			{ ...props }
+		/>
+	);
+};
+
+export default AdsAccountSelectControl;

js/src/components/app-select-control/index.js

@@ -16,14 +16,34 @@
  * it will be added to the container div's `className`,
  * so that you can further control its style.
  *
- * @param {*} props
+ * @param {*} props The component props.
+ * @param {boolean} [props.selectSingleValue=false] Whether the select should show only one value.
  */
 const AppSelectControl = ( props ) => {
-	const { className, ...rest } = props;
+	const { className, options, selectSingleValue = false, ...rest } = props;
+	const showSingleValue = selectSingleValue && options?.length === 1;
+
+	let selectProps = {
+		options,
+		...rest,
+	};
+
+	if ( showSingleValue ) {
+		selectProps = {
+			...selectProps,
+			suffix: ' ',
+			tabIndex: '-1',
+			readOnly: true,
+		};
+	}
 
 	return (
-		<div className={ classNames( 'app-select-control', className ) }>
-			<SelectControl { ...rest } />
+		<div
+			className={ classNames( 'app-select-control', className, {
+				'app-select-control--has-single-value': showSingleValue,
+			} ) }
+		>
+			<SelectControl { ...selectProps } />
 		</div>
 	);
 };

js/src/components/app-select-control/index.scss

@@ -3,3 +3,7 @@
 		margin-bottom: 0;
 	}
 }
+
+.app-select-control--has-single-value {
+	pointer-events: none;
+}

js/src/components/google-ads-account-card/connect-ads/index.js

@@ -19,7 +19,7 @@ import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
 import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
-import AdsAccountSelectControl from './ads-account-select-control';
+import AdsAccountSelectControl from '.~/components/ads-account-select-control';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
@@ -95,7 +95,7 @@ const ConnectAds = ( props ) => {
 			<Section.Card.Body>
 				<Subsection.Title>
 					{ __(
-						'Select an existing account',
+						'Connect to an existing account',
 						'google-listings-and-ads'
 					) }
 				</Subsection.Title>
@@ -120,7 +120,6 @@ const ConnectAds = ( props ) => {
 				) }
 				<ContentButtonLayout>
 					<AdsAccountSelectControl
-						accounts={ accounts }
 						value={ value }
 						onChange={ setValue }
 					/>

js/src/components/google-ads-account-card/connect-ads/index.test.js

@@ -15,6 +15,7 @@ import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import { useAppDispatch } from '.~/data';
 import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import expectComponentToRecordEventWithFilteredProperties from '.~/tests/expectComponentToRecordEventWithFilteredProperties';
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
 
 jest.mock( '.~/hooks/useApiFetchCallback', () =>
 	jest.fn().mockName( 'useApiFetchCallback' )
@@ -24,6 +25,10 @@ jest.mock( '.~/hooks/useGoogleAdsAccount', () =>
 	jest.fn().mockName( 'useGoogleAdsAccount' )
 );
 
+jest.mock( '.~/hooks/useExistingGoogleAdsAccounts', () =>
+	jest.fn().mockName( 'useExistingGoogleAdsAccounts' )
+);
+
 jest.mock( '.~/data', () => ( {
 	...jest.requireActual( '.~/data' ),
 	useAppDispatch: jest.fn(),
@@ -64,6 +69,10 @@ describe( 'ConnectAds', () => {
 				.mockName( 'refetchGoogleAdsAccount' ),
 		} );
 
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: accounts,
+		} );
+
 		fetchGoogleAdsAccountStatus = jest
 			.fn()
 			.mockName( 'fetchGoogleAdsAccountStatus' );
@@ -76,11 +85,7 @@ describe( 'ConnectAds', () => {
 
 	it( 'should render the given accounts in a selection', () => {
 		render( <ConnectAds accounts={ accounts } /> );
-
 		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
-		expect(
-			screen.getByRole( 'option', { name: 'Select one' } )
-		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'option', { name: 'Account A (1)' } )
 		).toBeInTheDocument();
@@ -115,22 +120,15 @@ describe( 'ConnectAds', () => {
 		expect( onCreateNew ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should disable the "Connect" button when no account is selected', async () => {
-		const user = userEvent.setup();
+	it( 'should disable the "Connect" button when there are no accounts', async () => {
+		useExistingGoogleAdsAccounts.mockReturnValue( {
+			existingAccounts: [],
+		} );
 
-		render( <ConnectAds accounts={ accounts } /> );
-		const combobox = screen.getByRole( 'combobox' );
+		render( <ConnectAds accounts={ [] } /> );
 		const button = getConnectButton();
 
 		expect( button ).toBeDisabled();
-
-		await user.selectOptions( combobox, '1' );
-
-		expect( button ).toBeEnabled();
-
-		await user.selectOptions( combobox, '' );
-
-		expect( button ).toBeDisabled();
 	} );
 
 	it( 'should render a connecting state and disable the button to switch to account creation after clicking the "Connect" button', async () => {

js/src/components/google-mc-account-card/connect-mc/index.js

@@ -98,7 +98,7 @@ const ConnectMC = () => {
 			<Section.Card.Body>
 				<Subsection.Title>
 					{ __(
-						'Select an existing account',
+						'Connect to an existing account',
 						'google-listings-and-ads'
 					) }
 				</Subsection.Title>

js/src/components/merchant-center-select-control/index.js

@@ -50,6 +50,7 @@ const MerchantCenterSelectControl = ( {
 			options={ options }
 			onChange={ onChange }
 			value={ value }
+			selectSingleValue
 			{ ...props }
 		/>
 	);

tests/e2e/specs/add-paid-campaigns/add-paid-campaigns.test.js

@@ -246,18 +246,10 @@ test.describe( 'Set up Ads account', () => {
 		test( 'Select one existing account', async () => {
 			const adsAccountSelected = `${ ADS_ACCOUNTS[ 1 ].id }`;
 
-			await expect(
-				setupAdsAccounts.getConnectAdsButton()
-			).toBeDisabled();
-
 			await setupAdsAccounts.selectAnExistingAdsAccount(
 				adsAccountSelected
 			);
 
-			await expect(
-				setupAdsAccounts.getConnectAdsButton()
-			).toBeEnabled();
-
 			//Intercept Ads connection request
 			const connectAdsAccountRequest =
 				setupAdsAccounts.registerConnectAdsAccountRequests(

tests/e2e/specs/setup-mc/step-1-accounts.test.js

@@ -340,12 +340,6 @@ test.describe( 'Set up accounts', () => {
 					await expect( select ).toBeVisible();
 				} );
 
-				test( 'should see connect button is disabled when no ads account is selected', async () => {
-					const button = setupAdsAccountPage.getConnectAdsButton();
-					await expect( button ).toBeVisible();
-					await expect( button ).toBeDisabled();
-				} );
-
 				test( 'should see connect button is enabled when an ads account is selected', async () => {
 					await setupAdsAccountPage.selectAnExistingAdsAccount(
 						'23456'
@@ -612,11 +606,11 @@ test.describe( 'Set up accounts', () => {
 			} );
 
 			test.describe( 'connect to an existing account', () => {
-				test( 'should see "Select an existing account" title', async () => {
+				test( 'should see "Connect to an existing account" title', async () => {
 					const selectAccountTitle =
 						setUpAccountsPage.getSelectExistingMCAccountTitle();
 					await expect( selectAccountTitle ).toContainText(
-						'Select an existing account'
+						'Connect to an existing account'
 					);
 				} );