Update Budget Setup Card.

js/src/components/paid-ads/ads-campaign/ads-campaign.js

@@ -99,6 +99,7 @@ export default function AdsCampaign( {
 						? campaign.displayCountries
 						: countryCodes
 				}
+				context={ context }
 			>
 				{ showBillingCard && <BillingCard /> }
 

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

@@ -10,36 +10,19 @@
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
 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'
 		  );
 
@@ -50,27 +33,29 @@
 }
 
 const BudgetRecommendation = ( props ) => {
-	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
+	const {
+		dailyAverageCost = Infinity,
+		highestDailyBudget,
+		highestDailyBudgetCountryCode,
+		budgetRecommendationData,
+	} = props;
+
 	const map = useCountryKeyNameMap();
 
-	if ( ! data ) {
+	if ( ! budgetRecommendationData ) {
 		return null;
 	}
 
-	const { currency, recommendations } = data;
-	const { daily_budget: dailyBudget, country } =
-		getHighestBudget( recommendations );
-
-	const countryName = map[ country ];
+	const { currency, recommendations } = budgetRecommendationData;
+	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

@@ -13,6 +13,9 @@
 import BudgetRecommendation from './budget-recommendation';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import AppInputPriceControl from '.~/components/app-input-price-control';
+import AppSpinner from '.~/components/app-spinner';
+import useFetchBudgetRecommendation from '.~/hooks/useFetchBudgetRecommendation';
+import clientSession from './clientSession';
 
 /**
  * @typedef {import('.~/data/actions').CountryCode} CountryCode
@@ -32,36 +35,56 @@
  * @param {Array<CountryCode>|undefined} 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.
+ * @param {'create-ads'|'edit-ads'|'setup-ads'|'setup-mc'} props.context A context indicating which page this component is used on.
  */
 const BudgetSection = ( {
 	formProps,
 	countryCodes,
 	disabled = false,
 	children,
+	context,
 } ) => {
-	const { getInputProps, setValue, values } = formProps;
+	const { getInputProps, values, setValue } = formProps;
 	const { amount } = values;
 	const { googleAdsAccount } = useGoogleAdsAccount();
+	const {
+		data: budgetRecommendationData,
+		highestDailyBudget,
+		highestDailyBudgetCountryCode,
+		hasFinishedResolution,
+	} = useFetchBudgetRecommendation( countryCodes );
+	const initialAmountRef = useRef( null );
 	const monthlyMaxEstimated = getMonthlyMaxEstimated( amount );
 	// Display the currency code that will be used by Google Ads, but still use the store's currency formatting settings.
 	const currency = googleAdsAccount?.currency;
 
-	// Wrapping `useRef` is because since WC 6.9, the reference of `setValue` may be changed
-	// after calling itself and further leads to an infinite re-rendering loop if used in a
-	// `useEffect`.
-	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 ] );
+		// Load the amount from client session during the onboarding flow only.
+		if (
+			context !== 'setup-mc' ||
+			! hasFinishedResolution ||
+			! values.amount
+		) {
+			return;
+		}
+
+		if ( values.amount >= highestDailyBudget ) {
+			clientSession.setCampaign( values );
+		}
+	}, [ values, highestDailyBudget, context, hasFinishedResolution ] );
+
+	if ( ! initialAmountRef.current && ! amount && hasFinishedResolution ) {
+		let clientSessionAmount = 0;
+		if ( context === 'setup-mc' ) {
+			( { amount: clientSessionAmount } = clientSession.getCampaign() );
+		}
+
+		initialAmountRef.current = true;
+		setValue(
+			'amount',
+			Math.max( clientSessionAmount, highestDailyBudget )
+		);
+	}
 
 	return (
 		<div className="gla-budget-section">
@@ -79,31 +102,46 @@
 			>
 				<Section.Card>
 					<Section.Card.Body className="gla-budget-section__card-body">
-						<div className="gla-budget-section__card-body__cost">
-							<AppInputPriceControl
-								label={ __(
-									'Daily average cost',
-									'google-listings-and-ads'
-								) }
-								suffix={ currency }
-								{ ...getInputProps( 'amount' ) }
-								{ ...( disabled && nonInteractableProps ) }
-							/>
-							<AppInputPriceControl
-								disabled
-								label={ __(
-									'Monthly max, estimated',
-									'google-listings-and-ads'
+						{ hasFinishedResolution ? (
+							<>
+								<div className="gla-budget-section__card-body__cost">
+									<AppInputPriceControl
+										label={ __(
+											'Daily average cost',
+											'google-listings-and-ads'
+										) }
+										suffix={ currency }
+										{ ...getInputProps( 'amount' ) }
+										{ ...( disabled &&
+											nonInteractableProps ) }
+									/>
+									<AppInputPriceControl
+										disabled
+										label={ __(
+											'Monthly max, estimated',
+											'google-listings-and-ads'
+										) }
+										suffix={ currency }
+										value={ monthlyMaxEstimated }
+									/>
+								</div>
+								{ countryCodes?.length > 0 && (
+									<BudgetRecommendation
+										dailyAverageCost={ amount }
+										highestDailyBudget={
+											highestDailyBudget
+										}
+										highestDailyBudgetCountryCode={
+											highestDailyBudgetCountryCode
+										}
+										budgetRecommendationData={
+											budgetRecommendationData
+										}
+									/>
 								) }
-								suffix={ currency }
-								value={ monthlyMaxEstimated }
-							/>
-						</div>
-						{ countryCodes?.length > 0 && (
-							<BudgetRecommendation
-								countryCodes={ countryCodes }
-								dailyAverageCost={ amount }
-							/>
+							</>
+						) : (
+							<AppSpinner />
 						) }
 					</Section.Card.Body>
 				</Section.Card>

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,57 @@
 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'
+			)
+		);
+	}
+}
+
+getAdsBudgetRecommendations.shouldInvalidate = ( action ) => {
+	return (
+		action.type === TYPES.RECEIVE_ACCOUNTS_GOOGLE_ADS ||
+		action.type === TYPES.DISCONNECT_ACCOUNTS_GOOGLE_ADS
+	);
+};