Update Budget Setup Card.

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

@@ -10,36 +10,20 @@
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
+import useFetchBudgetRecommendation from '.~/hooks/useFetchBudgetRecommendation';
 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.
 		  __(
-				'Google will optimize your ads to maximize performance.<br /><em>Tip: Most merchants who sell products in 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.<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'
 		  );
 
@@ -51,26 +35,24 @@
 
 const BudgetRecommendation = ( props ) => {
 	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
+	const { data, highestDailyBudgetCountryCode, highestDailyBudget } =
+		useFetchBudgetRecommendation( countryCodes );
 	const map = useCountryKeyNameMap();
 
 	if ( ! data ) {
 		return null;
 	}
 
 	const { currency, recommendations } = data;
-	const { daily_budget: dailyBudget, country } =
-		getHighestBudget( recommendations );
-
-	const countryName = map[ country ];
+	const countryName = map[ highestDailyBudgetCountryCode ];
 	const recommendationRange = toRecommendationRange(
 		recommendations.length > 1,
-		dailyBudget,
+		highestDailyBudget,
 		currency,
 		countryName
 	);
 
-	const showLowerBudgetNotice = dailyAverageCost < dailyBudget;
+	const showLowerBudgetNotice = dailyAverageCost < highestDailyBudget;
 
 	return (
 		<div className="gla-budget-recommendation">

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ const nonInteractableProps = {
  *
  * @param {Object} props React props.
  * @param {Object} props.formProps Form props forwarded from `Form` component.
- * @param {Array<CountryCode>|undefined} props.countryCodes Country codes to fetch budget recommendations for.
+ * @param {Array<CountryCode>} props.countryCodes Country codes to fetch budget recommendations for.
  * @param {boolean} [props.disabled=false] Whether display the Card in disabled style.
  * @param {JSX.Element} [props.children] Extra content to be rendered under the card of budget inputs.
  */
@@ -52,17 +52,6 @@ const BudgetSection = ( {
 	const setValueRef = useRef();
 	setValueRef.current = setValue;
 
-	/**
-	 * In addition to the initial value setting during initialization, when `disabled` changes
-	 * - from false to true, then clear filled amount to `undefined` for showing a blank <input>.
-	 * - from true to false, then reset amount to the initial value passed from the consumer side.
-	 */
-	const initialAmountRef = useRef( amount );
-	useEffect( () => {
-		const nextAmount = disabled ? undefined : initialAmountRef.current;
-		setValueRef.current( 'amount', nextAmount );
-	}, [ disabled ] );
-
 	return (
 		<div className="gla-budget-section">
 			<Section

js/src/data/action-types.js

@@ -49,6 +49,7 @@ const TYPES = {
 	UPSERT_TOUR: 'UPSERT_TOUR',
 	HYDRATE_PREFETCHED_DATA: 'HYDRATE_PREFETCHED_DATA',
 	RECEIVE_GOOGLE_ADS_ACCOUNT_STATUS: 'RECEIVE_GOOGLE_ADS_ACCOUNT_STATUS',
+	RECEIVE_ADS_BUDGET_RECOMMENDATIONS: 'RECEIVE_ADS_BUDGET_RECOMMENDATIONS',
 };
 
 export default TYPES;

js/src/data/reducer.js

@@ -69,6 +69,7 @@ const DEFAULT_STATE = {
 			inviteLink: null,
 			step: null,
 		},
+		budgetRecommendations: {},
 	},
 };
 
@@ -504,6 +505,19 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 				.end();
 		}
 
+		case TYPES.RECEIVE_ADS_BUDGET_RECOMMENDATIONS: {
+			const { countryCodesKey, currency, recommendations } = action;
+
+			return setIn(
+				state,
+				[ 'ads', 'budgetRecommendations', countryCodesKey ],
+				{
+					currency,
+					recommendations,
+				}
+			);
+		}
+
 		// Page will be reloaded after all accounts have been disconnected, so no need to mutate state.
 		case TYPES.DISCONNECT_ACCOUNTS_ALL:
 		default:

js/src/data/resolvers.js

@@ -15,7 +15,7 @@
 } from '.~/constants';
 import TYPES from './action-types';
 import { API_NAMESPACE } from './constants';
-import { getReportKey } from './utils';
+import { getReportKey, getCountryCodesKey } from './utils';
 import { handleApiError } from '.~/utils/handleError';
 import { adaptAdsCampaign, adaptAssetGroup } from './adapters';
 import { fetchWithHeaders, awaitPromise } from './controls';
@@ -48,6 +48,10 @@
 	receiveTour,
 } from './actions';
 
+/**
+ * @typedef {import('.~/data/actions').CountryCode} CountryCode
+ */
+
 export function* getShippingRates() {
 	yield fetchShippingRates();
 }
@@ -510,3 +514,50 @@
 getGoogleAdsAccountStatus.shouldInvalidate = ( action ) => {
 	return action.type === TYPES.DISCONNECT_ACCOUNTS_GOOGLE_ADS;
 };
+
+/**
+ * Fetch ad budget recommendations for the specified country codes.
+ *
+ * @param {Array<CountryCode>} [countryCodes] An array of country codes for which to fetch budget recommendations.
+ */
+export function* getAdsBudgetRecommendations( countryCodes ) {
+	if ( ! countryCodes || ! countryCodes.length ) {
+		return;
+	}
+
+	const countryCodesKey = getCountryCodesKey( countryCodes );
+	const endpoint = `${ API_NAMESPACE }/ads/campaigns/budget-recommendation`;
+	const query = { country_codes: countryCodes };
+	const path = addQueryArgs( endpoint, query );
+
+	try {
+		const { data } = yield fetchWithHeaders( {
+			path,
+		} );
+
+		const { currency, recommendations } = data;
+
+		return {
+			type: TYPES.RECEIVE_ADS_BUDGET_RECOMMENDATIONS,
+			countryCodesKey,
+			currency,
+			recommendations,
+		};
+	} catch ( response ) {
+		// Intentionally silence the specific in case the no budget recommendations are found from the API.
+		if ( response.status === 404 ) {
+			return;
+		}
+
+		const bodyPromise = response?.json() || response?.text();
+		const error = yield awaitPromise( bodyPromise );
+
+		handleApiError(
+			error,
+			__(
+				'There was an error getting the budget recommendation.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}

js/src/data/selectors.js

@@ -8,7 +8,12 @@
  * Internal dependencies
  */
 import { STORE_KEY } from './constants';
-import { getReportQuery, getReportKey, getPerformanceQuery } from './utils';
+import {
+	getReportQuery,
+	getReportKey,
+	getPerformanceQuery,
+	getCountryCodesKey,
+} from './utils';
 
 /**
  * @typedef {import('.~/data/actions').CountryCode} CountryCode
@@ -406,3 +411,16 @@
 export const getGoogleAdsAccountStatus = ( state ) => {
 	return state.ads.accountStatus;
 };
+
+/**
+ * Retrieves ad budget recommendations for provided country codes.
+ * If no recommendations are found, it returns `null`.
+ *
+ * @param {Object} state The state
+ * @param {Array<CountryCode>} [countryCodes] - An array of country code strings used to generate a unique key.
+ * @return {Object|null} The recommendations. It will be `null` if not yet fetched or fetched but doesn't exist.
+ */
+export const getAdsBudgetRecommendations = ( state, countryCodes = [] ) => {
+	const key = getCountryCodesKey( countryCodes );
+	return state.ads.budgetRecommendations[ key ] || null;
+};

js/src/data/test/reducer.test.js

@@ -72,6 +72,7 @@ describe( 'reducer', () => {
 					inviteLink: null,
 					step: null,
 				},
+				budgetRecommendations: {},
 			},
 		} );
 
@@ -865,6 +866,39 @@ describe( 'reducer', () => {
 		} );
 	} );
 
+	describe( 'Ads Budget Recommendations', () => {
+		const path = 'ads.budgetRecommendations';
+
+		it( 'should receive a budget recommendation', () => {
+			const recommendation = {
+				countryCodesKey: 'mu_sg',
+				currency: 'MUR',
+				recommendations: [
+					{
+						country: 'MU',
+						daily_budget: 15,
+					},
+					{
+						country: 'SG',
+						daily_budget: 10,
+					},
+				],
+			};
+
+			const action = {
+				type: TYPES.RECEIVE_ADS_BUDGET_RECOMMENDATIONS,
+				...recommendation,
+			};
+			const state = reducer( prepareState(), action );
+
+			state.assertConsistentRef();
+			expect( state ).toHaveProperty( `${ path }.mu_sg`, {
+				currency: recommendation.currency,
+				recommendations: recommendation.recommendations,
+			} );
+		} );
+	} );
+
 	describe( 'Remaining actions simply update the data payload to the specific path of state and return the updated state', () => {
 		// The readability is better than applying the formatting here.
 		/* eslint-disable prettier/prettier */

js/src/data/utils.js

@@ -9,6 +9,10 @@
  */
 import round from '.~/utils/round';
 
+/**
+ * @typedef { import(".~/data/actions").CountryCode } CountryCode
+ */
+
 export const freeFields = [ 'clicks', 'impressions' ];
 export const paidFields = [ 'sales', 'conversions', 'spend', ...freeFields ];
 /**
@@ -190,6 +194,20 @@
 	);
 }
 
+/**
+ * Generates a unique key (slug) from an array of country codes.
+ *
+ * This function sorts the array of country codes alphabetically,
+ * joins them into a single string with underscore (`_`), and converts
+ * the result to lowercase.
+ *
+ * @param {Array<CountryCode>} countryCodes - An array of country code strings.
+ * @return {string} A underscore-separated, lowercase string representing the sorted country codes.
+ */
+export function getCountryCodesKey( countryCodes = [] ) {
+	return [ ...countryCodes ].sort().join( '_' ).toLowerCase();
+}
+
 /**
  * Report fields fetched from report API.
  *

js/src/hooks/useFetchBudgetRecommendation.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_KEY } from '.~/data/constants';
+import getHighestBudget from '.~/utils/getHighestBudget';
+
+/**
+ * @typedef { import(".~/data/actions").CountryCode } CountryCode
+ */
+
+/**
+ * Fetch the highest budget recommendation for countries in a side effect.
+ *
+ * @param {Array<CountryCode>} [countryCodes] An array of country codes. If empty, the fetch will not be triggered.
+ * @return {Object} Budget recommendation.
+ */
+const useFetchBudgetRecommendation = ( countryCodes ) => {
+	return useSelect(
+		( select ) => {
+			const { getAdsBudgetRecommendations, hasFinishedResolution } =
+				select( STORE_KEY );
+
+			const data = getAdsBudgetRecommendations( countryCodes );
+			let highestDailyBudget = 0;
+			let highestDailyBudgetCountryCode;
+
+			if ( data ) {
+				const { recommendations } = data;
+				( {
+					daily_budget: highestDailyBudget,
+					country: highestDailyBudgetCountryCode,
+				} = getHighestBudget( recommendations ) );
+			}
+
+			return {
+				data,
+				highestDailyBudget,
+				highestDailyBudgetCountryCode,
+				hasFinishedResolution: hasFinishedResolution(
+					'getAdsBudgetRecommendations',
+					[ countryCodes ]
+				),
+			};
+		},
+		[ countryCodes ]
+	);
+};
+
+export default useFetchBudgetRecommendation;