diff --git a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js b/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
index 2492685c36..44152fa22c 100644
--- a/js/src/components/paid-ads/budget-section/budget-recommendation/index.js
+++ b/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: , em: , 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.
Tip: Most merchants targeting similar countries set a daily budget of %1$f %2$s',
+ 'We recommend running campaigns at least 1 month so it can learn to optimize for your business.
Tip: Most merchants targeting similar countries set a daily budget of %1$f %2$s',
'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.
Tip: Most merchants targeting %3$s set a daily budget of %1$f %2$s',
+ 'We recommend running campaigns at least 1 month so it can learn to optimize for your business.
Tip: Most merchants targeting %3$s set a daily budget of %1$f %2$s',
'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 (
diff --git a/js/src/components/paid-ads/budget-section/index.js b/js/src/components/paid-ads/budget-section/index.js
index 5c461602e6..b3d647d303 100644
--- a/js/src/components/paid-ads/budget-section/index.js
+++ b/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 && (
) }
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js
index 86c3739bf7..59b65b40f1 100644
--- a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js
+++ b/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 (