Update Budget Setup Card.

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

@@ -1,8 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /**
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,6 +18,8 @@
 import BudgetSection from './budget-section';
 import { CampaignPreviewCard } from './campaign-preview';
 import FaqsSection from './faqs-section';
+import useBudgetRecommendationData from '.~/hooks/useBudgetRecommendationData';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -55,6 +58,21 @@
 				'google-listings-and-ads'
 		  );
 
+	const {
+		country,
+		dailyBudget,
+		multipleRecommendations,
+		recommendations,
+		loading,
+	} = useBudgetRecommendationData( formContext.values.countryCodes );
+
+	useEffect( () => {
+		if ( ! loading ) {
+			const { amount } = clientSession.getCampaign() || {};
+			formContext.setValue( 'amount', amount || dailyBudget );
+		}
+	}, [ loading ] );
+
 	return (
 		<StepContent>
 			<StepContentHeader
@@ -95,6 +113,10 @@
 				formProps={ formContext }
 				disabled={ disabledBudgetSection }
 				countryCodes={ formContext.values.countryCodes }
+				country={ country }
+				dailyBudget={ dailyBudget }
+				isMultiple={ multipleRecommendations }
+				recommendations={ recommendations }
 			>
 				<CampaignPreviewCard />
 			</BudgetSection>

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 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,21 +33,19 @@
 }
 
 const BudgetRecommendation = ( props ) => {
-	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
-	const map = useCountryKeyNameMap();
-
-	if ( ! data ) {
-		return null;
-	}
+	const {
+		dailyAverageCost = Infinity,
+		currency,
+		country,
+		dailyBudget,
+		isMultiple,
+	} = props;
 
-	const { currency, recommendations } = data;
-	const { daily_budget: dailyBudget, country } =
-		getHighestBudget( recommendations );
+	const map = useCountryKeyNameMap();
 
 	const countryName = map[ country ];
 	const recommendationRange = toRecommendationRange(
-		recommendations.length > 1,
+		isMultiple,
 		dailyBudget,
 		currency,
 		countryName

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,15 +29,19 @@
  *
  * @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 {string} props.country Country code.
+ * @param {Array<CountryCode>} props.countryCodes Country codes to fetch budget recommendations for.
+ * @param {number} props.dailyBudget Daily budget.
  * @param {boolean} [props.disabled=false] Whether display the Card in disabled style.
+ * @param {boolean} [props.isMultiple=false] Whether the campaign is targeting multiple countries.
  * @param {JSX.Element} [props.children] Extra content to be rendered under the card of budget inputs.
  */
 const BudgetSection = ( {
 	formProps,
 	countryCodes,
 	disabled = false,
 	children,
+	...recommendationProps
 } ) => {
 	const { getInputProps, setValue, values } = formProps;
 	const { amount } = values;
@@ -52,16 +56,7 @@
 	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 ] );
+	const { recommendations } = recommendationProps || {};
 
 	return (
 		<div className="gla-budget-section">
@@ -99,10 +94,12 @@
 								value={ monthlyMaxEstimated }
 							/>
 						</div>
-						{ countryCodes?.length > 0 && (
+						{ recommendations?.length > 0 && (
 							<BudgetRecommendation
 								countryCodes={ countryCodes }
 								dailyAverageCost={ amount }
+								currency={ currency }
+								{ ...recommendationProps }
 							/>
 						) }
 					</Section.Card.Body>

js/src/hooks/useBudgetRecommendationData.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
+import getHighestBudget from '.~/utils/getHighestBudget';
+
+const useBudgetRecommendationData = ( countryCodes ) => {
+	const { data, loading } =
+		useFetchBudgetRecommendationEffect( countryCodes );
+
+	const [ country, setCountry ] = useState( '' );
+	const [ dailyBudget, setDailyBudget ] = useState( 0 );
+	const [ multipleRecommendations, setMultipleRecommendations ] =
+		useState( false );
+	const [ recommendations, setRecommendations ] = useState( [] );
+
+	useEffect( () => {
+		if ( ! loading ) {
+			const {
+				country: budgetCountries = '',
+				daily_budget: recommendedDailyBudget,
+			} = getHighestBudget( data?.recommendations );
+
+			setCountry( budgetCountries );
+			setDailyBudget( recommendedDailyBudget );
+			setMultipleRecommendations( data?.recommendations.length > 1 );
+			setRecommendations( data?.recommendations );
+		}
+	}, [ data?.recommendations, loading ] );
+
+	return {
+		country,
+		dailyBudget,
+		multipleRecommendations,
+		recommendations,
+		loading,
+	};
+};
+
+export default useBudgetRecommendationData;

js/src/pages/create-paid-ads-campaign/index.js

@@ -32,6 +32,7 @@
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
 } from '.~/utils/tracks';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 const eventName = 'gla_paid_campaign_step';
 const eventContext = 'create-ads';
@@ -133,6 +134,12 @@
 					countryCodes: initialCountryCodes,
 				} }
 				onSubmit={ handleSubmit }
+				onChange={ ( _, values, isValid ) => {
+					// Set the amount in session storage.
+					if ( isValid && _?.name === 'amount' ) {
+						clientSession.setCampaign( { amount: _.value } );
+					}
+				} }
 			>
 				<Stepper
 					currentStep={ step }

js/src/setup-ads/setup-ads-form.js

@@ -17,6 +17,7 @@ import CampaignAssetsForm from '.~/components/paid-ads/campaign-assets-form';
 import AdsStepper from './ads-stepper';
 import SetupAdsTopBar from './top-bar';
 import { recordGlaEvent } from '.~/utils/tracks';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 /**
  * @fires gla_launch_paid_campaign_button_click on submit
@@ -67,14 +68,19 @@ const SetupAdsForm = () => {
 		} );
 	};
 
-	const handleChange = ( _, values ) => {
+	const handleChange = ( _, values, isValid ) => {
 		const args = [ initialValues, values ].map(
 			( { countryCodes, ...v } ) => {
 				v.countrySet = new Set( countryCodes );
 				return v;
 			}
 		);
 
+		// Set the amount in session storage.
+		if ( isValid && _?.name === 'amount' ) {
+			clientSession.setCampaign( { amount: _.value } );
+		}
+
 		setFormChanged( ! isEqual( ...args ) );
 	};
 

js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-setup-sections.js

@@ -15,6 +15,7 @@ import Section from '.~/wcdl/section';
 import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import clientSession from './clientSession';
 import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
+import useBudgetRecommendationData from '.~/hooks/useBudgetRecommendationData';
 
 /**
  * @typedef {import('.~/data/actions').CountryCode} CountryCode
@@ -76,6 +77,14 @@ export default function PaidAdsSetupSections( {
 	const isBillingCompleted =
 		billingStatus?.status === GOOGLE_ADS_BILLING_STATUS.APPROVED;
 
+	const {
+		country,
+		dailyBudget,
+		recommendations,
+		multipleRecommendations,
+		loading,
+	} = useBudgetRecommendationData( countryCodes );
+
 	/*
 	  If a merchant has not yet finished the billing setup, the billing status will be
 	  updated by `useAutoCheckBillingStatusEffect` hook in `BillingSetupCard` component
@@ -91,15 +100,22 @@ export default function PaidAdsSetupSections( {
 	  For example, refresh page during onboarding flow after the billing setup is finished.
 	*/
 	useEffect( () => {
-		const nextPaidAds = {
-			...paidAds,
-			isReady: paidAds.isValid && isBillingCompleted,
-		};
-		onStatesReceivedRef.current( nextPaidAds );
-		clientSession.setCampaign( nextPaidAds );
-	}, [ paidAds, isBillingCompleted ] );
-
-	if ( ! billingStatus ) {
+		if ( ! loading ) {
+			const sessionCampaign = clientSession.getCampaign();
+			const sessionAmount = sessionCampaign?.amount;
+
+			const nextPaidAds = {
+				...paidAds,
+				amount: sessionAmount || dailyBudget,
+				isReady: paidAds.isValid && isBillingCompleted,
+			};
+
+			onStatesReceivedRef.current( nextPaidAds );
+			clientSession.setCampaign( nextPaidAds );
+		}
+	}, [ dailyBudget, paidAds, isBillingCompleted, loading ] );
+
+	if ( ! billingStatus || loading ) {
 		return (
 			<Section>
 				<SpinnerCard />
@@ -108,14 +124,18 @@ export default function PaidAdsSetupSections( {
 	}
 
 	const initialValues = {
-		amount: paidAds.amount,
+		amount: clientSession.getCampaign()?.amount || dailyBudget,
 	};
 
 	return (
 		<Form
 			initialValues={ initialValues }
 			onChange={ ( _, values, isValid ) => {
 				setPaidAds( { ...paidAds, ...values, isValid } );
+
+				if ( isValid ) {
+					clientSession.setCampaign( values );
+				}
 			} }
 			validate={ validateCampaign }
 		>
@@ -124,6 +144,10 @@ export default function PaidAdsSetupSections( {
 					<BudgetSection
 						formProps={ formProps }
 						countryCodes={ countryCodes }
+						country={ country }
+						dailyBudget={ dailyBudget }
+						isMultiple={ multipleRecommendations }
+						recommendations={ recommendations }
 					>
 						<BillingCard />
 					</BudgetSection>

js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js

@@ -171,10 +171,12 @@ export default function SetupPaidAds() {
 			<PaidAdsFeaturesSection
 				hideBudgetContent={ ! hasGoogleAdsConnection }
 			/>
-			<PaidAdsSetupSections
-				onStatesReceived={ setPaidAds }
-				countryCodes={ countryCodes }
-			/>
+			{ countryCodes?.length > 0 && (
+				<PaidAdsSetupSections
+					onStatesReceived={ setPaidAds }
+					countryCodes={ countryCodes }
+				/>
+			) }
 			<FaqsSection />
 
 			{ showSkipPaidAdsConfirmationModal && (