Update Budget Setup Card.

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

@@ -10,7 +10,6 @@
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
 import './index.scss';
 
 /*
@@ -34,12 +33,12 @@
 	const template = isMultiple
 		? // translators: it's a range of recommended budget amount. 1: the value of the budget, 2: the currency of amount.
 		  __(
-				'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>',
+				'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-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.
 		  __(
-				'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>',
+				'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-listings-and-ads'
 		  );
 
@@ -50,17 +49,19 @@
 }
 
 const BudgetRecommendation = ( props ) => {
-	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
+	const { countryCodes, dailyAverageCost = Infinity, data } = props;
 	const map = useCountryKeyNameMap();
 
 	if ( ! data ) {
 		return null;
 	}
 
 	const { currency, recommendations } = data;
-	const { daily_budget: dailyBudget, country } =
-		getHighestBudget( recommendations );
+	const { daily_budget: dailyBudget, country } = getHighestBudget(
+		recommendations.filter( ( recommendation ) =>
+			countryCodes.includes( recommendation.country )
+		)
+	);
 
 	const countryName = map[ country ];
 	const recommendationRange = toRecommendationRange(

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

@@ -30,7 +30,7 @@
  */
 const BudgetSection = ( { formProps, disabled = false, children } ) => {
 	const { getInputProps, setValue, values } = formProps;
-	const { countryCodes, amount } = 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.
@@ -93,6 +93,8 @@
 							<BudgetRecommendation
 								countryCodes={ countryCodes }
 								dailyAverageCost={ amount }
+								currency={ currency }
+								data={ recommendationData }
 							/>
 						) }
 					</Section.Card.Body>

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

@@ -11,6 +11,7 @@ import { Form } from '@woocommerce/components';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import useTargetAudienceFinalCountryCodes from '.~/hooks/useTargetAudienceFinalCountryCodes';
 import useGoogleAdsAccountBillingStatus from '.~/hooks/useGoogleAdsAccountBillingStatus';
+import useFetchBudgetRecommendationEffect from '.~/components/paid-ads/budget-section/budget-recommendation/useFetchBudgetRecommendationEffect';
 import AudienceSection from '.~/components/paid-ads/audience-section';
 import BudgetSection from '.~/components/paid-ads/budget-section';
 import BillingCard from '.~/components/paid-ads/billing-card';
@@ -33,10 +34,28 @@ import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 const defaultPaidAds = {
 	amount: 0,
 	countryCodes: [],
+	recommendations: [],
 	isValid: false,
 	isReady: false,
+	recommendationData: null,
 };
 
+/*
+ * 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;
+	} );
+}
+
 /**
  * Resolve the initial paid ads data from the given paid ads data with the loaded target audience.
  * Parts of the resolved data are used in the `initialValues` prop of `Form` component.
@@ -78,6 +97,14 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 	const { hasGoogleAdsConnection } = useGoogleAdsAccount();
 	const { data: targetAudience } = useTargetAudienceFinalCountryCodes();
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
+	const { data: recommendationData } =
+		useFetchBudgetRecommendationEffect( targetAudience );
+	const { recommendations } = recommendationData || {};
+
+	const { daily_budget: dailyBudget } =
+		recommendations !== undefined
+			? getHighestBudget( recommendations )
+			: {};
 
 	const onStatesReceivedRef = useRef();
 	onStatesReceivedRef.current = onStatesReceived;
@@ -127,10 +154,15 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 	  - https://github.com/woocommerce/google-listings-and-ads/blob/5b6522ca10ad75556e6b2de7c120cc712aab70b1/js/src/components/free-listings/setup-free-listings/index.js#L172-L186
 	*/
 	useEffect( () => {
-		setPaidAds( ( currentPaidAds ) =>
-			resolveInitialPaidAds( currentPaidAds, targetAudience )
-		);
-	}, [ targetAudience ] );
+		setPaidAds( ( currentPaidAds ) => {
+			currentPaidAds = {
+				...currentPaidAds,
+				amount: dailyBudget ? dailyBudget : currentPaidAds.amount,
+				recommendationData,
+			};
+			return resolveInitialPaidAds( currentPaidAds, targetAudience );
+		} );
+	}, [ targetAudience, dailyBudget, recommendationData ] );
 
 	if ( ! targetAudience || ! billingStatus ) {
 		return (
@@ -143,6 +175,7 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 	const initialValues = {
 		countryCodes: paidAds.countryCodes,
 		amount: paidAds.amount,
+		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();
@@ -289,9 +302,25 @@ test.describe( 'Complete your campaign', () => {
 						textAfterRemoveCountry
 					);
 				} );
+
+				test( 'should have the tip text "We recommend running campaigns at least 1 month so it can learn to optimize for your business."', async () => {
+					const tipText =
+						setupBudgetPage.getBudgetRecommendationTip();
+					await expect( tipText ).toContainText(
+						'We recommend running campaigns at least 1 month so it can learn to optimize for your business.'
+					);
+				} );
 			} );
 
 			test.describe( 'Set up budget', () => {
+				test( '"Daily average cost" input should have highest value set', async () => {
+					const dailyAverageCostInput =
+						setupBudgetPage.getBudgetInput();
+					await expect( dailyAverageCostInput ).toHaveValue(
+						'20.00'
+					);
+				} );
+
 				test( 'should see the low budget tip when the buget is set lower than the recommended value', async () => {
 					await setupBudgetPage.fillBudget( '1' );
 					const lowBudgetTip = setupBudgetPage.getLowerBudgetTip();
@@ -425,7 +454,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
 	 *

tests/e2e/utils/pages/setup-ads/setup-budget.js

@@ -12,6 +12,17 @@ export default class SetupBudget extends MockRequests {
 		this.page = page;
 	}
 
+	/**
+	 * Get budget recommendation tip section.
+	 *
+	 * @return {import('@playwright/test').Locator} The budget recommendation text row.
+	 */
+	getBudgetRecommendationTip() {
+		return this.page.locator(
+			'.gla-budget-recommendation > .components-tip'
+		);
+	}
+
 	/**
 	 * Get budget recommendation text row.
 	 *