Enable users to seamlessly set up conversion tracking during the onboarding flow

.eslintrc.js

@@ -46,6 +46,10 @@ module.exports = {
 				additionalHooks: 'useSelect',
 			},
 		],
+		'jest/expect-expect': [
+			'warn',
+			{ assertFunctionNames: [ 'expect', 'expect[A-Z]\\w*' ] },
+		],
 	},
 	overrides: [
 		{

jest.config.js

@@ -41,19 +41,6 @@ module.exports = {
 		wcAdminFeatures: {
 			navigation: false,
 		},
-		glaData: {
-			slug: 'gla',
-			mcSetupComplete: true,
-			mcSupportedCountry: true,
-			mcSupportedLanguage: true,
-			adsSetupComplete: true,
-			enableReports: true,
-			dateFormat: 'F j, Y',
-			timeFormat: 'g:i a',
-			initialWpData: {
-				version: '1.2.3',
-			},
-		},
 	},
 	timers: 'fake',
 };

js/src/components/account-card/index.js

@@ -93,15 +93,15 @@ const appearanceDict = {
 		icon: googleMCLogo,
 		title: __( 'Google Merchant Center', 'google-listings-and-ads' ),
 		description: __(
-			'Required to sync products and list on Google',
+			'Required to sync products and list on Google.',
 			'google-listings-and-ads'
 		),
 	},
 	[ APPEARANCE.GOOGLE_ADS ]: {
 		icon: googleAdsLogo,
 		title: __( 'Google Ads', 'google-listings-and-ads' ),
 		description: __(
-			'Connect with millions of shoppers who are searching for products like yours and drive sales with Google.',
+			'Required to set up conversion measurement and create campaigns.',
 			'google-listings-and-ads'
 		),
 	},

js/src/components/account-card/index.scss

@@ -56,6 +56,14 @@
 		background-color: #f8ebea;
 	}
 
+	.components-notice.is-success {
+		background-color: #edfaef;
+		border: 0;
+		font-size: $helptext-font-size;
+		margin: 0 var(--large-gap) var(--main-gap);
+		padding: $grid-unit-20;
+	}
+
 	@media (max-width: $break-small) {
 		.components-card__body > .components-flex {
 			flex-direction: column;

js/src/components/google-ads-account-card/claim-account-button.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import AppButton from '.~/components/app-button';
+import getWindowFeatures from '.~/utils/getWindowFeatures';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
+import useEventPropertiesFilter from '.~/hooks/useEventPropertiesFilter';
+
+/**
+ * Clicking on the button to open the invitation page for claiming the newly created Google Ads account.
+ *
+ * @event gla_open_ads_account_claim_invitation_button_click
+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.
+ */
+
+/**
+ * Renders a button for opening a pop-up window to claim the newly created Google Ads account.
+ *
+ * @fires gla_open_ads_account_claim_invitation_button_click When the user clicks on the button to claim the account.
+ *
+ * @param {Object} props React props.
+ * @param {Function} [props.onClick] Function called back when the button is clicked.
+ * @param {Object} props.restProps Props to be forwarded to AppButton.
+ */
+const ClaimAccountButton = ( { onClick = noop, ...restProps } ) => {
+	const { inviteLink } = useGoogleAdsAccountStatus();
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
+
+	const handleClaimAccountClick = ( event ) => {
+		const { defaultView } = event.target.ownerDocument;
+		const features = getWindowFeatures( defaultView, 600, 800 );
+
+		defaultView.open( inviteLink, '_blank', features );
+
+		onClick( event );
+	};
+
+	return (
+		<AppButton
+			{ ...restProps }
+			eventName="gla_open_ads_account_claim_invitation_button_click"
+			eventProps={ getEventProps() }
+			onClick={ handleClaimAccountClick }
+		/>
+	);
+};
+
+export default ClaimAccountButton;

js/src/components/google-ads-account-card/claim-account-button.test.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { recordEvent } from '@woocommerce/tracks';
+
+/**
+ * Internal dependencies
+ */
+import ClaimAccountButton from './claim-account-button';
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
+import expectComponentToRecordEventWithFilteredProperties from '.~/tests/expectComponentToRecordEventWithFilteredProperties';
+
+jest.mock( '.~/hooks/useGoogleAdsAccountStatus', () =>
+	jest.fn().mockName( 'useGoogleAdsAccountStatus' )
+);
+
+jest.mock( '@woocommerce/tracks', () => {
+	return {
+		recordEvent: jest.fn().mockName( 'recordEvent' ),
+	};
+} );
+
+describe( 'ClaimAccountButton', () => {
+	let windowOpen;
+
+	beforeEach( () => {
+		windowOpen = jest.spyOn( global, 'open' );
+
+		useGoogleAdsAccountStatus.mockReturnValue( {
+			inviteLink: 'https://example.com',
+		} );
+	} );
+
+	afterEach( () => {
+		windowOpen.mockReset();
+		recordEvent.mockClear();
+	} );
+
+	it( 'should render the specified text in the button', () => {
+		render(
+			<ClaimAccountButton>
+				Claim account in example.com
+			</ClaimAccountButton>
+		);
+
+		expect( screen.getByRole( 'button' ) ).toHaveTextContent(
+			'Claim account in example.com'
+		);
+	} );
+
+	it( 'should forward onClick callback', async () => {
+		const onClick = jest.fn();
+		render( <ClaimAccountButton onClick={ onClick } /> );
+
+		expect( onClick ).toHaveBeenCalledTimes( 0 );
+
+		await userEvent.click( screen.getByRole( 'button' ) );
+
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should open the invitation link in a pop-up window', async () => {
+		render( <ClaimAccountButton /> );
+
+		expect( windowOpen ).toHaveBeenCalledTimes( 0 );
+
+		await userEvent.click( screen.getByRole( 'button' ) );
+
+		expect( windowOpen ).toHaveBeenCalledTimes( 1 );
+		expect( windowOpen ).toHaveBeenCalledWith(
+			'https://example.com',
+			'_blank',
+			// Ignore the value of the window features.
+			expect.any( String )
+		);
+	} );
+
+	it( 'should record click events and be aware of extra event properties from filters', async () => {
+		await expectComponentToRecordEventWithFilteredProperties(
+			ClaimAccountButton,
+			FILTER_ONBOARDING,
+			async () => await userEvent.click( screen.getByRole( 'button' ) ),
+			'gla_open_ads_account_claim_invitation_button_click',
+			[
+				{ context: 'setup-mc', step: '1' },
+				{ context: 'setup-ads', step: '2' },
+			]
+		);
+	} );
+} );

js/src/components/google-ads-account-card/claim-account-modal.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleAdsAccountStatus from '.~/hooks/useGoogleAdsAccountStatus';
+import AppModal from '.~/components/app-modal';
+import ClaimAccountButton from './claim-account-button';
+
+/**
+ * Renders a modal for opening a pop-up window to claim the newly created Google Ads account.
+ * The modal is displayed when the user has successfully created a Google Ads account and needs to claim it.
+ *
+ * @param {Object} props React props.
+ * @param {Function} props.onRequestClose Function called back when the modal is requested to be closed.
+ */
+const ClaimAccountModal = ( { onRequestClose } ) => {
+	const { hasAccess } = useGoogleAdsAccountStatus();
+
+	useEffect( () => {
+		// Close the modal if access has been granted.
+		if ( hasAccess ) {
+			onRequestClose();
+		}
+	}, [ onRequestClose, hasAccess ] );
+
+	return (
+		<AppModal
+			className="gla-ads-invite-modal"
+			title={ __(
+				'Claim your Google Ads account',
+				'google-listings-and-ads'
+			) }
+			buttons={ [
+				<ClaimAccountButton
+					key="1"
+					isPrimary
+					onClick={ onRequestClose }
+				>
+					{ __(
+						'Claim account in Google Ads',
+						'google-listings-and-ads'
+					) }
+				</ClaimAccountButton>,
+			] }
+			onRequestClose={ onRequestClose }
+		>
+			<p>
+				{ __(
+					'Claiming your account lets you access Google Ads and sets up conversion measurement. You must claim your account in the next 20 days.',
+					'google-listings-and-ads'
+				) }
+			</p>
+			<p>
+				{ __(
+					'When you claim your account, you’ll be asked to set up billing. This step is optional and you only need to complete it if you want to create Google Ads campaigns. If you don’t want to set up billing, close the window after you’ve clicked ‘Continue’ on the next page.',
+					'google-listings-and-ads'
+				) }
+			</p>
+		</AppModal>
+	);
+};
+
+export default ClaimAccountModal;

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useAppDispatch } from '.~/data';
+import Section from '.~/wcdl/section';
+import useWindowFocusCallbackIntervalEffect from '.~/hooks/useWindowFocusCallbackIntervalEffect';
+import DisconnectAccount from '../disconnect-account';
+import './index.scss';
+
+const ClaimAccount = () => {
+	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
+	useWindowFocusCallbackIntervalEffect( fetchGoogleAdsAccountStatus, 30 );
+
+	return (
+		<Fragment>
+			<p className="gla-ads-claim-account-notice">
+				{ __(
+					'Claim your new Google Ads account to complete this setup.',
+					'google-listings-and-ads'
+				) }
+			</p>
+
+			<Section.Card.Footer>
+				<DisconnectAccount />
+			</Section.Card.Footer>
+		</Fragment>
+	);
+};
+
+export default ClaimAccount;

js/src/components/google-ads-account-card/claim-account/index.scss

@@ -0,0 +1,6 @@
+.gla-ads-claim-account-notice {
+	background-color: #ffeec1;
+	font-size: $helptext-font-size;
+	margin: 0 var(--large-gap) var(--large-gap);
+	padding: $grid-unit-20;
+}

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

@@ -18,14 +18,19 @@ import Subsection from '.~/wcdl/subsection';
 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 { useAppDispatch } from '.~/data';
+import { FILTER_ONBOARDING } from '.~/utils/tracks';
 import './index.scss';
 
 /**
  * Clicking on the button to connect an existing Google Ads account.
  *
  * @event gla_ads_account_connect_button_click
  * @property {number} id The account ID to be connected.
+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.
  */
 
 /**
@@ -44,7 +49,9 @@ const ConnectAds = ( props ) => {
 		data: { id: value },
 	} );
 	const { refetchGoogleAdsAccount } = useGoogleAdsAccount();
+	const getEventProps = useEventPropertiesFilter( FILTER_ONBOARDING );
 	const { createNotice } = useDispatchCoreNotices();
+	const { fetchGoogleAdsAccountStatus } = useAppDispatch();
 
 	/**
 	 * Boolean to display blurb message to advise users
@@ -62,6 +69,7 @@ const ConnectAds = ( props ) => {
 		setLoading( true );
 		try {
 			await fetchConnectAdsAccount();
+			await fetchGoogleAdsAccountStatus();
 			await refetchGoogleAdsAccount();
 		} catch ( error ) {
 			setLoading( false );
@@ -128,7 +136,9 @@ const ConnectAds = ( props ) => {
 							isSecondary
 							disabled={ ! value }
 							eventName="gla_ads_account_connect_button_click"
-							eventProps={ { id: Number( value ) } }
+							eventProps={ getEventProps( {
+								id: Number( value ),
+							} ) }
 							onClick={ handleConnectClick }
 						>
 							{ __( 'Connect', 'google-listings-and-ads' ) }