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,7 @@
 import BudgetSection from './budget-section';
 import { CampaignPreviewCard } from './campaign-preview';
 import FaqsSection from './faqs-section';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 /**
  * @typedef {import('.~/data/actions').Campaign} Campaign
@@ -55,6 +57,14 @@
 				'google-listings-and-ads'
 		  );
 
+	// Set the amount from client session if it is available.
+	useEffect( () => {
+		const sessionData = clientSession.getCampaign();
+		if ( sessionData?.amount !== undefined ) {
+			formContext.setValue( 'amount', sessionData.amount );
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
 	return (
 		<StepContent>
 			<StepContentHeader

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

@@ -2,16 +2,17 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useEffect } from '@wordpress/element';
 import { Tip } from '@wordpress/components';
 import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
 
 /**
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
 import './index.scss';
+import useFetchBudgetRecommendationEffect from '.~/hooks/useFetchBudgetRecommendationEffect';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 /*
  * If a merchant selects more than one country, the budget recommendation
@@ -21,25 +22,30 @@
  * 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 recommendations.reduce(
+		( defender, challenger ) => {
+			if ( challenger.daily_budget > defender.daily_budget ) {
+				return challenger;
+			}
+			return defender;
+		},
+		{
+			daily_budget: 0,
 		}
-		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,18 +56,42 @@
 }
 
 const BudgetRecommendation = ( props ) => {
-	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
+	const {
+		countryCodes,
+		dailyAverageCost = Infinity,
+		setRecommendedBudget,
+		setRecommendationsLoaded,
+	} = props;
+
 	const map = useCountryKeyNameMap();
+	const { data, loading } =
+		useFetchBudgetRecommendationEffect( countryCodes );
 
-	if ( ! data ) {
-		return null;
-	}
+	const recommendationsLoaded = ! loading;
 
-	const { currency, recommendations } = data;
+	const { currency, recommendations = [] } = data || {};
 	const { daily_budget: dailyBudget, country } =
 		getHighestBudget( recommendations );
 
+	useEffect( () => {
+		if ( recommendationsLoaded ) {
+			const sessionData = clientSession.getCampaign();
+			const sessionAmount =
+				sessionData?.amount !== undefined
+					? dailyAverageCost
+					: dailyBudget;
+
+			setRecommendationsLoaded( true );
+			setRecommendedBudget( sessionAmount );
+		}
+	}, [
+		dailyAverageCost,
+		dailyBudget,
+		recommendationsLoaded,
+		setRecommendationsLoaded,
+		setRecommendedBudget,
+	] );
+
 	const countryName = map[ country ];
 	const recommendationRange = toRecommendationRange(
 		recommendations.length > 1,

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 { useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@
 import BudgetRecommendation from './budget-recommendation';
 import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount';
 import AppInputPriceControl from '.~/components/app-input-price-control';
+import clientSession from '.~/setup-mc/setup-stepper/setup-paid-ads/clientSession';
 
 const nonInteractableProps = {
 	noPointerEvents: true,
@@ -42,16 +43,40 @@
 	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 );
+	const [ recommendedBudget, setRecommendedBudget ] = useState( null );
+	const [ recommendationsLoaded, setRecommendationsLoaded ] =
+		useState( false );
+
 	useEffect( () => {
-		const nextAmount = disabled ? undefined : initialAmountRef.current;
-		setValueRef.current( 'amount', nextAmount );
-	}, [ disabled ] );
+		if ( ! recommendationsLoaded || recommendedBudget === null ) {
+			return;
+		}
+
+		const sessionData = clientSession.getCampaign();
+
+		let sessionAmount;
+		if ( sessionData?.amount === undefined ) {
+			sessionAmount = recommendedBudget;
+		} else {
+			sessionAmount = amount;
+		}
+
+		if ( disabled ) {
+			sessionAmount = undefined;
+		}
+
+		clientSession.setCampaign( {
+			amount: sessionAmount,
+			countryCodes,
+		} );
+		setValueRef.current( 'amount', sessionAmount );
+	}, [
+		amount,
+		countryCodes,
+		disabled,
+		recommendationsLoaded,
+		recommendedBudget,
+	] );
 
 	return (
 		<div className="gla-budget-section">
@@ -93,6 +118,10 @@
 							<BudgetRecommendation
 								countryCodes={ countryCodes }
 								dailyAverageCost={ amount }
+								setRecommendedBudget={ setRecommendedBudget }
+								setRecommendationsLoaded={
+									setRecommendationsLoaded
+								}
 							/>
 						) }
 					</Section.Card.Body>

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

@@ -114,7 +114,6 @@ export default function PaidAdsSetupSections( { onStatesReceived } ) {
 			isReady: paidAds.isValid && isBillingCompleted,
 		};
 		onStatesReceivedRef.current( nextPaidAds );
-		clientSession.setCampaign( nextPaidAds );
 	}, [ paidAds, isBillingCompleted ] );
 
 	/*

tests/e2e/specs/setup-mc/step-4-complete-campaign.test.js

@@ -84,6 +84,24 @@ test.describe( 'Complete your campaign', () => {
 				[ 'GET' ]
 			),
 
+			completeCampaign.fulfillBudgetRecommendations( {
+				currency: 'USD',
+				recommendations: [
+					{
+						country: 'US',
+						daily_budget: 10,
+					},
+					{
+						country: 'TW',
+						daily_budget: 8,
+					},
+					{
+						country: 'GB',
+						daily_budget: 20,
+					},
+				],
+			} ),
+
 			// The following mocks are requests will happen after completing the onboarding
 			completeCampaign.mockSuccessfulSettingsSyncRequest(),
 
@@ -256,7 +274,7 @@ test.describe( 'Complete your campaign', () => {
 					await expect( treeSelectMenu ).not.toBeVisible();
 				} );
 
-				test( 'should see the budget recommendation value changed, and see the budget recommendation request is triggered when changing the ads audience', async () => {
+				test( 'should see the budget recommendation value changed when changing the ads audience', async () => {
 					let textContent = await setupBudgetPage
 						.getBudgetRecommendationTextRow()
 						.textContent();
@@ -266,16 +284,26 @@ test.describe( 'Complete your campaign', () => {
 							textContent
 						);
 
-					const responsePromise =
-						setupBudgetPage.registerBudgetRecommendationResponse();
+					// Mock response when UK is removed from the target audience.
+					completeCampaign.fulfillBudgetRecommendations( {
+						currency: 'USD',
+						recommendations: [
+							{
+								country: 'US',
+								daily_budget: 10,
+							},
+							{
+								country: 'TW',
+								daily_budget: 8,
+							},
+						],
+					} );
 
 					await removeCountryFromSearchBox(
 						page,
 						'United Kingdom (UK)'
 					);
 
-					await responsePromise;
-
 					textContent = await setupBudgetPage
 						.getBudgetRecommendationTextRow()
 						.textContent();
@@ -288,10 +316,28 @@ test.describe( 'Complete your campaign', () => {
 					await expect( textBeforeRemoveCountry ).not.toBe(
 						textAfterRemoveCountry
 					);
+
+					await expect( textAfterRemoveCountry ).toBe( '10' );
+				} );
+
+				test( 'should have the tip text "We recommend running campaigns at least 1 month so it can learn to optimize for your business."', async () => {
+					const tipText =
+						setupBudgetPage.getBudgetRecommendationTip();
+					await expect( tipText ).toContainText(
+						'We recommend running campaigns at least 1 month so it can learn to optimize for your business.'
+					);
 				} );
 			} );
 
 			test.describe( 'Set up budget', () => {
+				test( '"Daily average cost" input should have highest value set', async () => {
+					const dailyAverageCostInput =
+						setupBudgetPage.getBudgetInput();
+					await expect( dailyAverageCostInput ).toHaveValue(
+						'20.00'
+					);
+				} );
+
 				test( 'should see the low budget tip when the buget is set lower than the recommended value', async () => {
 					await setupBudgetPage.fillBudget( '1' );
 					const lowBudgetTip = setupBudgetPage.getLowerBudgetTip();

tests/e2e/utils/mock-requests.js

@@ -375,6 +375,21 @@ export default class MockRequests {
 		);
 	}
 
+	/**
+	 * Fulfill the budget recommendations request.
+	 *
+	 * @param {Object} payload
+	 * @return {Promise<void>}
+	 */
+	async fulfillBudgetRecommendations( payload ) {
+		await this.fulfillRequest(
+			/\/wc\/gla\/ads\/campaigns\/budget-recommendation\b/,
+			payload,
+			200,
+			[ 'GET' ]
+		);
+	}
+
 	/**
 	 * Mock the request to connect Jetpack
 	 *

tests/e2e/utils/pages/setup-ads/setup-budget.js

@@ -12,6 +12,17 @@ export default class SetupBudget extends MockRequests {
 		this.page = page;
 	}
 
+	/**
+	 * Get budget recommendation tip section.
+	 *
+	 * @return {import('@playwright/test').Locator} The budget recommendation tip.
+	 */
+	getBudgetRecommendationTip() {
+		return this.page.locator(
+			'.gla-budget-recommendation > .components-tip'
+		);
+	}
+
 	/**
 	 * Get budget recommendation text row.
 	 *