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 (