Add minimum budget limit

js/src/components/app-input-control/index.scss

@@ -29,11 +29,13 @@
 		color: $gray-700;
 	}
 
+	&.has-error .components-input-control__backdrop,
 	&--error-character-count .components-input-control .components-input-control__container .components-input-control__backdrop {
 		border-color: $alert-red;
 		box-shadow: none;
 	}
 
+	&.has-error .components-base-control__help,
 	&--error-character-count &__character-count {
 		color: $alert-red;
 	}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
@@ -11,9 +11,10 @@ import { __ } from '@wordpress/i18n';
  * Validate campaign form. Accepts the form values object and returns errors object.
  *
  * @param {CampaignFormValues} values Campaign form values.
+ * @param {Object} opts Extra form options.
  * @return {Object} errors.
  */
-const validateCampaign = ( values ) => {
+const validateCampaign = ( values, opts ) => {
 	const errors = {};
 
 	if ( ! Number.isFinite( values.amount ) || values.amount <= 0 ) {
@@ -23,6 +24,27 @@ const validateCampaign = ( values ) => {
 		);
 	}
 
+	if (
+		Number.isFinite( values?.amount ) &&
+		Number.isFinite( opts?.budget?.daily_budget )
+	) {
+		const { amount } = values;
+		const { budget, budgetMin } = opts;
+		const { daily_budget: dailyBudget } = budget;
+		const minAmount = Math.round( dailyBudget * budgetMin, 2 );
+
+		if ( amount < minAmount ) {
+			errors.amount = sprintf(
+				/* translators: %s: minimum daily budget */
+				__(
+					'Please make sure daily average cost is at least %s.',
+					'google-listings-and-ads'
+				),
+				minAmount
+			);
+		}
+	}
+
 	return errors;
 };
 

js/src/components/paid-ads/validateCampaign.test.js

@@ -72,4 +72,34 @@ describe( 'validateCampaign', () => {
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
 	} );
+
+	it( 'When a budget is provided and the amount is less than the minimum, should not pass', () => {
+		values.amount = 10;
+
+		const opts = {
+			budget: {
+				daily_budget: 100,
+			},
+			budgetMin: 0.3,
+		};
+
+		const errors = validateCampaign( values, opts );
+
+		expect( errors ).toHaveProperty( 'amount' );
+		expect( errors.amount ).toContain( 'at least 30' );
+	} );
+
+	it( 'When a budget is provided and the amount is greater than the minimum, should pass', () => {
+		values.amount = 35;
+
+		const opts = {
+			budget: {
+				daily_budget: 100,
+			},
+			budgetMin: 0.3,
+		};
+
+		const errors = validateCampaign( values, opts );
+		expect( errors ).not.toHaveProperty( 'amount' );
+	} );
 } );

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

@@ -8,13 +8,15 @@ import { Form } from '@woocommerce/components';
  * Internal dependencies
  */
 import useGoogleAdsAccountBillingStatus from '.~/hooks/useGoogleAdsAccountBillingStatus';
+import useFetchBudgetRecommendationEffect from '.~/components/paid-ads/budget-section/budget-recommendation/useFetchBudgetRecommendationEffect';
 import BudgetSection from '.~/components/paid-ads/budget-section';
 import BillingCard from '.~/components/paid-ads/billing-card';
 import SpinnerCard from '.~/components/spinner-card';
 import Section from '.~/wcdl/section';
 import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import clientSession from './clientSession';
 import { GOOGLE_ADS_BILLING_STATUS } from '.~/constants';
+import getHighestBudget from '.~/utils/getHighestBudget';
 
 /**
  * @typedef {import('.~/data/actions').CountryCode} CountryCode
@@ -73,6 +75,10 @@ export default function PaidAdsSetupSections( {
 		return resolveInitialPaidAds( startingPaidAds );
 	} );
 
+	const { data: budgetData } =
+		useFetchBudgetRecommendationEffect( countryCodes );
+	const budget = getHighestBudget( budgetData?.recommendations );
+
 	const isBillingCompleted =
 		billingStatus?.status === GOOGLE_ADS_BILLING_STATUS.APPROVED;
 
@@ -111,13 +117,20 @@ export default function PaidAdsSetupSections( {
 		amount: paidAds.amount,
 	};
 
+	const formOpts = {
+		budget,
+		budgetMin: 0.3,
+	};
+
 	return (
 		<Form
 			initialValues={ initialValues }
 			onChange={ ( _, values, isValid ) => {
 				setPaidAds( { ...paidAds, ...values, isValid } );
 			} }
-			validate={ validateCampaign }
+			validate={ ( formValues ) =>
+				validateCampaign( formValues, formOpts )
+			}
 		>
 			{ ( formProps ) => {
 				return (

js/src/utils/getHighestBudget.js

@@ -0,0 +1,19 @@
+/*
+ * 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).
+ */
+export default function getHighestBudget( recommendations ) {
+	if ( ! recommendations ) {
+		return null;
+	}
+
+	return recommendations.reduce( ( defender, challenger ) => {
+		if ( challenger.daily_budget > defender.daily_budget ) {
+			return challenger;
+		}
+		return defender;
+	} );
+}

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

@@ -208,6 +208,52 @@ test.describe( 'Complete your campaign', () => {
 				} );
 			} );
 
+			test.describe( 'Validate budget percent', () => {
+				test.beforeAll( async () => {
+					await setupBudgetPage.mockBudgetRecommendation( {
+						currency: 'USD',
+						recommendations: [
+							{
+								country: 'US',
+								daily_budget: 100,
+							},
+						],
+					} );
+				} );
+
+				test( 'should see validation error if lower than the 30%', async () => {
+					await setupBudgetPage.fillBudget( '10' );
+					await setupBudgetPage.getBudgetInput().blur();
+
+					const error = await page
+						.locator( '.components-base-control__help' )
+						.textContent();
+					await expect( error ).toBe(
+						'Please make sure daily average cost is at least 30.'
+					);
+				} );
+
+				test( 'should not see validation error if exactly 30%', async () => {
+					await setupBudgetPage.fillBudget( '30' );
+					await setupBudgetPage.getBudgetInput().blur();
+
+					const error = await page.locator(
+						'.components-base-control__help'
+					);
+					await expect( error ).not.toBeVisible();
+				} );
+
+				test( 'should not see validation error if greater than 30%', async () => {
+					await setupBudgetPage.fillBudget( '40' );
+					await setupBudgetPage.getBudgetInput().blur();
+
+					const error = await page.locator(
+						'.components-base-control__help'
+					);
+					await expect( error ).not.toBeVisible();
+				} );
+			} );
+
 			test.describe( 'Set up billing', () => {
 				let newPage;
 

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

@@ -148,6 +148,20 @@ export default class SetupBudget extends MockRequests {
 		);
 	}
 
+	/**
+	 * Mock the budget recommendation.
+	 *
+	 * @param {Object} payload The payload.
+	 * @return {Promise<void>}
+	 */
+	async mockBudgetRecommendation( payload ) {
+		await this.fulfillRequest(
+			/\/wc\/gla\/ads\/campaigns\/budget-recommendation\b/,
+			payload,
+			200
+		);
+	}
+
 	/**
 	 * Mock the campaign creation process and the Ads setup completion.
 	 *