Add blurb to inform users to connect Google Ads child account and not a parent MCC account

[ecgan]

Changes proposed in this Pull Request:

Closes #1346.

This PR adds a "blurb" or message to the UI to encourage users to only connect child Google Ads accounts, not manager account.

The message will only be displayed when there are more than one Google Ads account. Clicking on the "Learn more" link will log a track event:

wcadmin_gla_documentation_link_click {context: 'setup-ads-connect-account', link_id: 'connect-sub-account', href: 'https://support.google.com/google-ads/answer/6139186'}

Other technical notes:

• I have changed the AdsAccountSelectControl so that it receives accounts prop that is passed down from NonConnected component and doesn't need to rely on useExistingGoogleAdsAccounts hook.
• AdsAccountSelectControl is only used in ConnectAds component. I have moved it from the shared components folder into the local folder together with ConnectAds.

Screenshots:

When there is only one Google Ads account:

When there are more than one Google Ads account:

Clicking on the "Learn more" link will log a track event:

Detailed test instructions:

Note: to simulate a single Google Ads account or multiple Google Ads accounts, you can modify the following lines:

google-listings-and-ads/js/src/data/reducer.js

Lines 241 to 243 in e06e6c3

	case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: {
	return setIn( state, 'mc.accounts.existing_ads', action.accounts );
	}

		// For single account:
		case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: {
			return setIn( state, 'mc.accounts.existing_ads', [ 11111 ] );
		}

		// For multiple accounts:
		case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: {
			return setIn( state, 'mc.accounts.existing_ads', [ 11111, 22222 ] );
		}

1. Disconnect your Google Ads account.
2. Go to Setup Ads flow. You should see the screenshots above.
3. Click on the "Learn more" link. You should see track event being logged.

Changelog entry

Tweak - Add message to advise users to only connect Google Ads child account, not manager account.

[ecgan]

@j111q , please see the screenshots in the PR description above. It is a bit different from what we have in your design, specifically the text message goes over / above the "Connect" button (instead of having the same width as the drop down select control and having some empty space on the right). I make it that way to be consistent with the other cards, e.g. Switch URL Card. I hope that looks good.

The design:

The implemented UI:

The design for Switch URL Card:

[j111q]

Yup that's fine. Let me just update the Figma so it's consistent and I don't forget. Thanks for heads up Gan! 🙏 🚀

[tomalec]

Tested locally, reviewed the code, LGTM.