Update Budget Setup Card.

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

@@ -9,37 +9,19 @@ import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 /**
  * 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 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,27 +32,22 @@ function toRecommendationRange( isMultiple, ...values ) {
 }
 
 const BudgetRecommendation = ( props ) => {
-	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
-	const map = useCountryKeyNameMap();
-
-	if ( ! data ) {
-		return null;
-	}
-
-	const { currency, recommendations } = data;
-	const { daily_budget: dailyBudget, country } =
-		getHighestBudget( recommendations );
+	const {
+		countryCodes,
+		dailyBudget: recommendedBudget,
+		country: countryName,
+		currency,
+		value: currentBudget,
+	} = props;
 
-	const countryName = map[ country ];
 	const recommendationRange = toRecommendationRange(
-		recommendations.length > 1,
-		dailyBudget,
+		countryCodes.length > 1,
+		recommendedBudget,
 		currency,
 		countryName
 	);
 
-	const showLowerBudgetNotice = dailyAverageCost < dailyBudget;
+	const showLowerBudgetNotice = currentBudget < recommendedBudget;
 
 	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 } = values;
+	const { countryCodes, amount, country, dailyBudget } = 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,7 +92,10 @@ const BudgetSection = ( { formProps, disabled = false, children } ) => {
 						{ countryCodes.length > 0 && (
 							<BudgetRecommendation
 								countryCodes={ countryCodes }
-								dailyAverageCost={ amount }
+								{ ...getInputProps( 'amount' ) }
+								country={ country }
+								currency={ currency }
+								dailyBudget={ dailyBudget }
 							/>
 						) }
 					</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';
@@ -32,11 +33,29 @@ import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
 
 const defaultPaidAds = {
 	amount: 0,
+	country: undefined,
 	countryCodes: [],
+	dailyBudget: 0,
 	isValid: false,
 	isReady: false,
 };
 
+/*
+ * 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, country } =
+		recommendations !== undefined
+			? getHighestBudget( recommendations )
+			: {};
 
 	const onStatesReceivedRef = useRef();
 	onStatesReceivedRef.current = onStatesReceived;
@@ -127,10 +154,16 @@ 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,
+				country: country ? country : currentPaidAds.country,
+				dailyBudget,
+			};
+			return resolveInitialPaidAds( currentPaidAds, targetAudience );
+		} );
+	}, [ targetAudience, dailyBudget, country ] );
 
 	if ( ! targetAudience || ! billingStatus ) {
 		return (
@@ -143,6 +176,8 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 	const initialValues = {
 		countryCodes: paidAds.countryCodes,
 		amount: paidAds.amount,
+		country: paidAds.country,
+		dailyBudget: paidAds.dailyBudget,
 	};
 
 	return (