Fix: e2e tests.

js/src/components/paid-ads/budget-section/budget-recommendation/index.js

@@ -9,19 +9,36 @@ import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 /**
  * Internal dependencies
  */
+import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
 import './index.scss';
 
+/*
+ * If a merchant selects more than one country, the budget recommendation
+ * takes the highest country out from the selected countries.
+ *
+ * For example, a merchant selected Brunei (20 USD) and Croatia (15 USD),
+ * then the budget recommendation should be (20 USD).
+ */
+function getHighestBudget( recommendations ) {
+	return recommendations.reduce( ( defender, challenger ) => {
+		if ( challenger.daily_budget > defender.daily_budget ) {
+			return challenger;
+		}
+		return defender;
+	} );
+}
+
 function toRecommendationRange( isMultiple, ...values ) {
 	const conversionMap = { strong: <strong />, em: <em />, br: <br /> };
 	const template = isMultiple
 		? // translators: it's a range of recommended budget amount. 1: the value of the budget, 2: the currency of amount.
 		  __(
-				'We recommend running campaigns at least 1 month so it can learn to optimize for your business.<br /><em>Tip: Most merchants targeting similar countries <strong>set a daily budget of %1$f %2$s</strong></em>',
+				'Google will optimize your ads to maximize performance across the country/s you select.<br /><em>Tip: Most merchants targeting similar countries <strong>set a daily budget of %1$f %2$s</strong></em>',
 				'google-listings-and-ads'
 		  )
 		: // translators: it's a range of recommended budget amount. 1: the value of the budget, 2: the currency of amount 3: a country name selected by the merchant.
 		  __(
-				'We recommend running campaigns at least 1 month so it can learn to optimize for your business.<br /><em>Tip: Most merchants targeting <strong>%3$s set a daily budget of %1$f %2$s</strong></em>',
+				'Google will optimize your ads to maximize performance across the country/s you select.<br /><em>Tip: Most merchants targeting <strong>%3$s set a daily budget of %1$f %2$s</strong></em>',
 				'google-listings-and-ads'
 		  );
 
@@ -32,22 +49,29 @@ function toRecommendationRange( isMultiple, ...values ) {
 }
 
 const BudgetRecommendation = ( props ) => {
-	const {
-		countryCodes,
-		dailyBudget: recommendedBudget,
-		country: countryName,
-		currency,
-		value: currentBudget,
-	} = props;
+	const { countryCodes, dailyAverageCost = Infinity, data } = props;
+	const map = useCountryKeyNameMap();
+
+	if ( ! data ) {
+		return null;
+	}
+
+	const { currency, recommendations } = data;
+	const { daily_budget: dailyBudget, country } = getHighestBudget(
+		recommendations.filter( ( recommendation ) =>
+			countryCodes.includes( recommendation.country )
+		)
+	);
 
+	const countryName = map[ country ];
 	const recommendationRange = toRecommendationRange(
-		countryCodes.length > 1,
-		recommendedBudget,
+		recommendations.length > 1,
+		dailyBudget,
 		currency,
 		countryName
 	);
 
-	const showLowerBudgetNotice = currentBudget < recommendedBudget;
+	const showLowerBudgetNotice = dailyAverageCost < dailyBudget;
 
 	return (
 		<div className="gla-budget-recommendation">

js/src/components/paid-ads/budget-section/index.js

@@ -30,7 +30,7 @@ const nonInteractableProps = {
  */
 const BudgetSection = ( { formProps, disabled = false, children } ) => {
 	const { getInputProps, setValue, values } = formProps;
-	const { countryCodes, amount, country, dailyBudget } = values;
+	const { countryCodes, amount, recommendationData } = values;
 	const { googleAdsAccount } = useGoogleAdsAccount();
 	const monthlyMaxEstimated = getMonthlyMaxEstimated( amount );
 	// Display the currency code that will be used by Google Ads, but still use the store's currency formatting settings.
@@ -92,10 +92,9 @@ const BudgetSection = ( { formProps, disabled = false, children } ) => {
 						{ countryCodes.length > 0 && (
 							<BudgetRecommendation
 								countryCodes={ countryCodes }
-								{ ...getInputProps( 'amount' ) }
-								country={ country }
+								dailyAverageCost={ amount }
 								currency={ currency }
-								dailyBudget={ dailyBudget }
+								data={ recommendationData }
 							/>
 						) }
 					</Section.Card.Body>

js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js

@@ -33,11 +33,11 @@ import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
 const defaultPaidAds = {
 	amount: 0,
-	country: undefined,
 	countryCodes: [],
-	dailyBudget: 0,
+	recommendations: [],
 	isValid: false,
 	isReady: false,
+	recommendationData: {},
 };
 
 /*
@@ -101,7 +101,7 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 		useFetchBudgetRecommendationEffect( targetAudience );
 	const { recommendations } = recommendationData || {};
 
-	const { daily_budget: dailyBudget, country } =
+	const { daily_budget: dailyBudget } =
 		recommendations !== undefined
 			? getHighestBudget( recommendations )
 			: {};
@@ -158,12 +158,11 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 			currentPaidAds = {
 				...currentPaidAds,
 				amount: dailyBudget ? dailyBudget : currentPaidAds.amount,
-				country: country ? country : currentPaidAds.country,
-				dailyBudget,
+				recommendationData,
 			};
 			return resolveInitialPaidAds( currentPaidAds, targetAudience );
 		} );
-	}, [ targetAudience, dailyBudget, country ] );
+	}, [ targetAudience, dailyBudget, recommendationData ] );
 
 	if ( ! targetAudience || ! billingStatus ) {
 		return (
@@ -176,8 +175,7 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 	const initialValues = {
 		countryCodes: paidAds.countryCodes,
 		amount: paidAds.amount,
-		country: paidAds.country,
-		dailyBudget: paidAds.dailyBudget,
+		recommendationData: paidAds.recommendationData,
 	};
 
 	return (

tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js

@@ -84,6 +84,24 @@ test.describe( 'Complete your campaign', () => {
 				[ 'GET' ]
 			),
 
+			completeCampaign.fulfillBudgetRecommendations( {
+				currency: 'USD',
+				recommendations: [
+					{
+						country: 'US',
+						daily_budget: 10,
+					},
+					{
+						country: 'TW',
+						daily_budget: 8,
+					},
+					{
+						country: 'GB',
+						daily_budget: 20,
+					},
+				],
+			} ),
+
 			// The following mocks are requests will happen after completing the onboarding
 			completeCampaign.mockSuccessfulSettingsSyncRequest(),
 
@@ -266,16 +284,11 @@ test.describe( 'Complete your campaign', () => {
 							textContent
 						);
 
-					const responsePromise =
-						setupBudgetPage.registerBudgetRecommendationResponse();
-
 					await removeCountryFromSearchBox(
 						page,
 						'United Kingdom (UK)'
 					);
 
-					await responsePromise;
-
 					textContent = await setupBudgetPage
 						.getBudgetRecommendationTextRow()
 						.textContent();
@@ -425,7 +438,9 @@ test.describe( 'Complete your campaign', () => {
 		} );
 
 		test( 'should also see the url contains product-feed', async () => {
-			expect( page.url() ).toMatch( /path=%2Fgoogle%2Fproduct-feed/ );
+			await expect( page.url() ).toMatch(
+				/path=%2Fgoogle%2Fproduct-feed/
+			);
 		} );
 
 		test( 'should see buttons on Dashboard for Google Ads onboarding', async () => {

tests/e2e/utils/mock-requests.js

@@ -375,6 +375,21 @@ export default class MockRequests {
 		);
 	}
 
+	/**
+	 * Fulfill the budget recommendations request.
+	 *
+	 * @param {Object} payload
+	 * @return {Promise<void>}
+	 */
+	async fulfillBudgetRecommendations( payload ) {
+		await this.fulfillRequest(
+			/\/wc\/gla\/ads\/campaigns\/budget-recommendation\b/,
+			payload,
+			200,
+			[ 'GET' ]
+		);
+	}
+
 	/**
 	 * Mock the request to connect Jetpack
 	 *