Setup Paid Ads Campaign Step 1 Account Connection

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

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AppSpinner from '.~/components/app-spinner';
+import './index.scss';
+
+const AccountSelectControl = ( props ) => {
+	const { accounts, ...rest } = props;
+
+	if ( ! accounts ) {
+		return <AppSpinner />;
+	}
+
+	const options = [
+		{
+			value: '',
+			label: __( 'Select one', 'google-listings-and-ads' ),
+		},
+		...accounts.map( ( acc ) => ( {
+			value: acc,
+			label: __( 'Account ', 'google-listings-and-ads' ) + acc,
+		} ) ),
+	];
+
+	return (
+		<div className="gla-account-select-control">
+			<SelectControl options={ options } { ...rest } />
+		</div>
+	);
+};
+
+export default AccountSelectControl;

js/src/components/merchant-center-select-control/index.scss → js/src/components/account-select-control/index.scss

@@ -1,4 +1,4 @@
-.gla-merchant-center-select-control {
+.gla-account-select-control {
 	.components-base-control__field {
 		margin-bottom: 0;
 	}

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

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import useExistingGoogleAdsAccounts from '.~/hooks/useExistingGoogleAdsAccounts';
+import AccountSelectControl from '../account-select-control';
+
+const AdsAccountSelectControl = ( props ) => {
+	const { existingAccounts } = useExistingGoogleAdsAccounts();
+
+	return <AccountSelectControl accounts={ existingAccounts } { ...props } />;
+};
+
+export default AdsAccountSelectControl;

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

@@ -17,10 +17,14 @@ const GoogleAccount = ( props ) => {
 		<DisabledDiv disabled={ disabled }>
 			<Section
 				title={ __( 'Google account', 'google-listings-and-ads' ) }
-				description={ __(
-					'WooCommerce uses your Google account to sync with Google Merchant Center and Google Ads.',
-					'google-listings-and-ads'
-				) }
+				description={
+					<p>
+						{ __(
+							'WooCommerce uses your Google account to sync with Google Merchant Center and Google Ads.',
+							'google-listings-and-ads'
+						) }
+					</p>
+				}
 			>
 				<Section.Card>
 					<Section.Card.Body>

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

@@ -1,44 +1,16 @@
-/**
- * External dependencies
- */
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
-import AppSpinner from '.~/components/app-spinner';
-import './index.scss';
+import AccountSelectControl from '../account-select-control';
 
 const MerchantCenterSelectControl = ( props ) => {
-	const { value, onChange } = props;
 	const { existingAccounts } = useExistingGoogleMCAccounts();
 
-	if ( ! existingAccounts ) {
-		return <AppSpinner />;
-	}
-
-	const options = [
-		{
-			value: '',
-			label: __( 'Select one', 'google-listings-and-ads' ),
-		},
-		...existingAccounts.map( ( acc ) => ( {
-			value: acc.id,
-			label: acc.id,
-		} ) ),
-	];
+	const accounts =
+		existingAccounts && existingAccounts.map( ( acc ) => acc.id );
 
-	return (
-		<div className="gla-merchant-center-select-control">
-			<SelectControl
-				options={ options }
-				value={ value }
-				onChange={ onChange }
-			/>
-		</div>
-	);
+	return <AccountSelectControl accounts={ accounts } { ...props } />;
 };
 
 export default MerchantCenterSelectControl;

js/src/components/stepper/top-bar/index.js

@@ -17,7 +17,7 @@ import './index.scss';
  * to be used when configuring a campaign during oboarding and later.
  *
  * @param {Object} props
- * @param {string} props.title Title to indcate where the user is at.
+ * @param {string} props.title Title to indicate where the user is at.
  * @param {string} props.backHref Href for the back button.
  * @param {Function} props.onBackButtonClick
  * @param {Function} props.onHelpButtonClick

js/src/dashboard/all-programs-table-card/index.js

@@ -2,8 +2,9 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { getQuery, onQueryChange } from '@woocommerce/navigation';
+import { getQuery, getNewPath, onQueryChange } from '@woocommerce/navigation';
+import { Link } from '@woocommerce/components';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -65,22 +66,22 @@ const AllProgramsTableCard = ( props ) => {
 		},
 	];
 
-	// TODO: what happens when click add paid campaign button.
-	const handleAddPaidCampaignClick = () => {};
-
 	return (
 		<AppTableCard
 			className="gla-all-programs-table-card"
 			title={
 				<div className="gla-all-programs-table-card__header">
-					{ __( 'All Programs', 'google-listings-and-ads' ) }
-					<Button
-						isSecondary
-						isSmall
-						onClick={ handleAddPaidCampaignClick }
+					{ __( 'Programs', 'google-listings-and-ads' ) }
+					<Link
+						className={ classnames(
+							'components-button',
+							'is-secondary',
+							'is-small'
+						) }
+						href={ getNewPath( {}, '/google/setup-ads' ) }
 					>
-						Add Paid Campaign
-					</Button>
+						{ __( 'Add Paid Campaign', 'google-listings-and-ads' ) }
+					</Link>
 				</div>
 			}
 			headers={ headers }

js/src/data/action-types.js

@@ -11,6 +11,9 @@ const TYPES = {
 	RECEIVE_ACCOUNTS_GOOGLE: 'RECEIVE_ACCOUNTS_GOOGLE',
 	RECEIVE_ACCOUNTS_GOOGLE_MC: 'RECEIVE_ACCOUNTS_GOOGLE_MC',
 	RECEIVE_ACCOUNTS_GOOGLE_MC_EXISTING: 'RECEIVE_ACCOUNTS_GOOGLE_MC_EXISTING',
+	RECEIVE_ACCOUNTS_GOOGLE_ADS: 'RECEIVE_ACCOUNTS_GOOGLE_ADS',
+	RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING:
+		'RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING',
 	RECEIVE_COUNTRIES: 'RECEIVE_COUNTRIES',
 	RECEIVE_TARGET_AUDIENCE: 'RECEIVE_TARGET_AUDIENCE',
 	SAVE_TARGET_AUDIENCE: 'SAVE_TARGET_AUDIENCE',

js/src/data/actions.js

@@ -305,6 +305,48 @@ export function* fetchExistingGoogleMCAccounts() {
 	}
 }
 
+export function* fetchGoogleAdsAccount() {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/ads/connection`,
+		} );
+
+		return {
+			type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS,
+			account: response,
+		};
+	} catch ( error ) {
+		yield handleFetchError(
+			error,
+			__(
+				'There was an error loading Google Ads account info.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}
+
+export function* fetchExistingGoogleAdsAccounts() {
+	try {
+		const response = yield apiFetch( {
+			path: `${ API_NAMESPACE }/ads/accounts`,
+		} );
+
+		return {
+			type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING,
+			accounts: response,
+		};
+	} catch ( error ) {
+		yield handleFetchError(
+			error,
+			__(
+				'There was an error getting your Google Ads accounts.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}
+
 export function* fetchCountries() {
 	try {
 		const response = yield apiFetch( {
@@ -354,6 +396,13 @@ export function receiveMCAccount( account ) {
 	};
 }
 
+export function receiveAdsAccount( account ) {
+	return {
+		type: TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS,
+		account,
+	};
+}
+
 export function* saveTargetAudience( targetAudience ) {
 	try {
 		yield apiFetch( {

js/src/data/reducer.js

@@ -21,7 +21,9 @@ const DEFAULT_STATE = {
 			jetpack: null,
 			google: null,
 			mc: null,
+			ads: null,
 			existing_mc: null,
+			existing_ads: null,
 		},
 	},
 };
@@ -128,6 +130,20 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 			return newState;
 		}
 
+		case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS: {
+			const { account } = action;
+			const newState = cloneDeep( state );
+			newState.mc.accounts.ads = account;
+			return newState;
+		}
+
+		case TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS_EXISTING: {
+			const { accounts } = action;
+			const newState = cloneDeep( state );
+			newState.mc.accounts.existing_ads = accounts;
+			return newState;
+		}
+
 		case TYPES.RECEIVE_COUNTRIES: {
 			const { countries } = action;
 			const newState = cloneDeep( state );

js/src/data/resolvers.js

@@ -9,6 +9,8 @@ import {
 	fetchGoogleAccount,
 	fetchGoogleMCAccount,
 	fetchExistingGoogleMCAccounts,
+	fetchGoogleAdsAccount,
+	fetchExistingGoogleAdsAccounts,
 	fetchCountries,
 	fetchTargetAudience,
 } from './actions';
@@ -41,6 +43,14 @@ export function* getExistingGoogleMCAccounts() {
 	yield fetchExistingGoogleMCAccounts();
 }
 
+export function* getGoogleAdsAccount() {
+	yield fetchGoogleAdsAccount();
+}
+
+export function* getExistingGoogleAdsAccounts() {
+	yield fetchExistingGoogleAdsAccounts();
+}
+
 export function* getCountries() {
 	yield fetchCountries();
 }

js/src/data/selectors.js

@@ -26,6 +26,14 @@ export const getExistingGoogleMCAccounts = ( state ) => {
 	return state.mc.accounts.existing_mc;
 };
 
+export const getGoogleAdsAccount = ( state ) => {
+	return state.mc.accounts.ads;
+};
+
+export const getExistingGoogleAdsAccounts = ( state ) => {
+	return state.mc.accounts.existing_ads;
+};
+
 export const getCountries = ( state ) => {
 	return state.mc.countries;
 };

js/src/hooks/useExistingGoogleAdsAccounts.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from '.~/data/constants';
+
+const useExistingGoogleAdsAccounts = () => {
+	return useSelect( ( select ) => {
+		const existingAccounts = select(
+			STORE_KEY
+		).getExistingGoogleAdsAccounts();
+		const isResolving = select( STORE_KEY ).isResolving(
+			'getExistingGoogleAdsAccounts'
+		);
+
+		return { existingAccounts, isResolving };
+	} );
+};
+
+export default useExistingGoogleAdsAccounts;

js/src/hooks/useGoogleAdsAccount.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from '.~/data/constants';
+import useGoogleAccount from './useGoogleAccount';
+
+const useGoogleAdsAccount = () => {
+	const { google, isResolving } = useGoogleAccount();
+
+	return useSelect( ( select ) => {
+		if ( ! google || google.active === 'no' ) {
+			return {
+				googleAdsAccount: undefined,
+				isResolving,
+			};
+		}
+
+		const acc = select( STORE_KEY ).getGoogleAdsAccount();
+		const isResolvingGoogleAdsAccount = select( STORE_KEY ).isResolving(
+			'getGoogleAdsAccount'
+		);
+
+		return {
+			googleAdsAccount: acc,
+			isResolving: isResolvingGoogleAdsAccount,
+		};
+	} );
+};
+
+export default useGoogleAdsAccount;