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/campaign-assets-form.js

@@ -11,6 +11,7 @@
 import AdaptiveForm from '.~/components/adaptive-form';
 import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import validateAssetGroup from '.~/components/paid-ads/validateAssetGroup';
+import useAdsCurrency from '.~/hooks/useAdsCurrency';
 
 /**
  * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
@@ -66,10 +67,12 @@
  * @param {Object} props React props.
  * @param {CampaignFormValues} props.initialCampaign Initial campaign values.
  * @param {AssetEntityGroup} [props.assetEntityGroup] The asset entity group to be used in initializing the form values for editing.
+ * @param {number} props.recommendedDailyBudget The recommended daily budget for the campaign. The minimum campaign amount will be set to 30% of this value.
  */
 export default function CampaignAssetsForm( {
 	initialCampaign,
 	assetEntityGroup,
+	recommendedDailyBudget,
 	...adaptiveFormProps
 } ) {
 	const initialAssetGroup = useMemo( () => {
@@ -78,6 +81,7 @@
 
 	const [ baseAssetGroup, setBaseAssetGroup ] = useState( initialAssetGroup );
 	const [ hasImportedAssets, setHasImportedAssets ] = useState( false );
+	const { formatAmount } = useAdsCurrency();
 
 	const extendAdapter = ( formContext ) => {
 		const assetGroupErrors = validateAssetGroup( formContext.values );
@@ -117,13 +121,20 @@
 		};
 	};
 
+	const validateCampaignWithMinimumAmount = ( values ) => {
+		return validateCampaign( values, {
+			dailyBudget: recommendedDailyBudget,
+			formatAmount,
+		} );
+	};
+
 	return (
 		<AdaptiveForm
 			initialValues={ {
 				...initialCampaign,
 				...initialAssetGroup,
 			} }
-			validate={ validateCampaign }
+			validate={ validateCampaignWithMinimumAmount }
 			extendAdapter={ extendAdapter }
 			{ ...adaptiveFormProps }
 		/>

js/src/components/paid-ads/campaign-assets-form.test.js

@@ -10,6 +10,12 @@ import userEvent from '@testing-library/user-event';
  */
 import CampaignAssetsForm from './campaign-assets-form';
 
+jest.mock( '@wordpress/api-fetch', () => {
+	const impl = jest.fn().mockName( '@wordpress/api-fetch' );
+	impl.use = jest.fn().mockName( 'apiFetch.use' );
+	return impl;
+} );
+
 const alwaysValid = () => ( {} );
 
 describe( 'CampaignAssetsForm', () => {

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

@@ -1,26 +1,62 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
  */
 
+/**
+ * @typedef {Object} ValidateCampaignOptions
+ * @property {number|undefined} dailyBudget Daily budget for the campaign.
+ * @property {Function} formatAmount A function to format the budget amount according to the currency settings.
+ */
+
+// Minimum percentage of the recommended daily budget.
+const BUDGET_MIN_PERCENT = 0.3;
+
 /**
  * Validate campaign form. Accepts the form values object and returns errors object.
  *
  * @param {CampaignFormValues} values Campaign form values.
+ * @param {ValidateCampaignOptions} opts Extra form options.
  * @return {Object} errors.
  */
-const validateCampaign = ( values ) => {
+const validateCampaign = ( values, opts ) => {
 	const errors = {};
 
+	if (
+		Number.isFinite( values.amount ) &&
+		Number.isFinite( opts.dailyBudget ) &&
+		opts.dailyBudget > 0
+	) {
+		const { amount } = values;
+		const { dailyBudget, formatAmount } = opts;
+
+		const minAmount = Math.ceil( dailyBudget * BUDGET_MIN_PERCENT );
+
+		if ( amount < minAmount ) {
+			return {
+				amount: sprintf(
+					/* translators: %1$s: minimum daily budget */
+					__(
+						'Please make sure daily average cost is at least %s',
+						'google-listings-and-ads'
+					),
+					formatAmount( minAmount )
+				),
+			};
+		}
+	}
+
 	if ( ! Number.isFinite( values.amount ) || values.amount <= 0 ) {
-		errors.amount = __(
-			'Please make sure daily average cost is greater than 0.',
-			'google-listings-and-ads'
-		);
+		return {
+			amount: __(
+				'Please make sure daily average cost is greater than 0.',
+				'google-listings-and-ads'
+			),
+		};
 	}
 
 	return errors;

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

@@ -3,28 +3,39 @@
  */
 import validateCampaign from './validateCampaign';
 
+const mockFormatAmount = jest
+	.fn()
+	.mockImplementation( ( amount ) => `Rs ${ amount }` );
+
 /**
  * `validateCampaign` function returns an object, and if any checks are not passed,
  * set properties respectively with an error message to indicate it.
  */
 describe( 'validateCampaign', () => {
 	let values;
+	const validateCampaignOptions = {
+		dailyBudget: undefined,
+		formatAmount: mockFormatAmount,
+	};
 
 	beforeEach( () => {
 		// Initial values
 		values = { amount: 0 };
 	} );
 
 	it( 'When all checks are passed, should return an empty object', () => {
-		const errors = validateCampaign( {
-			amount: 1,
-		} );
+		const errors = validateCampaign(
+			{
+				amount: 1,
+			},
+			validateCampaignOptions
+		);
 
 		expect( errors ).toStrictEqual( {} );
 	} );
 
 	it( 'should indicate multiple unpassed checks by setting properties in the returned object', () => {
-		const errors = validateCampaign( values );
+		const errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 	} );
@@ -33,25 +44,25 @@ describe( 'validateCampaign', () => {
 		let errors;
 
 		values.amount = '';
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
 
 		values.amount = undefined;
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
 
 		values.amount = new Date();
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
 
 		values.amount = NaN;
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
@@ -61,15 +72,73 @@ describe( 'validateCampaign', () => {
 		let errors;
 
 		values.amount = 0;
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		expect( errors ).toHaveProperty( 'amount' );
 		expect( errors.amount ).toMatchSnapshot();
 
 		values.amount = -0.01;
-		errors = validateCampaign( values );
+		errors = validateCampaign( values, validateCampaignOptions );
 
 		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 = {
+			dailyBudget: 100,
+			formatAmount: mockFormatAmount,
+		};
+
+		const errors = validateCampaign( values, opts );
+
+		expect( errors ).toHaveProperty( 'amount' );
+		expect( errors.amount ).toContain( 'is at least Rs 30' );
+	} );
+
+	it( 'When a budget is provided and the amount is same as the minimum, should pass', () => {
+		values.amount = 30;
+
+		const opts = {
+			dailyBudget: 100,
+			formatAmount: mockFormatAmount,
+		};
+
+		const errors = validateCampaign( values, opts );
+		expect( errors ).not.toHaveProperty( 'amount' );
+	} );
+
+	it( 'When a budget is provided and the amount is greater than the minimum, should pass', () => {
+		values.amount = 35;
+
+		const opts = {
+			dailyBudget: 100,
+			formatAmount: mockFormatAmount,
+		};
+
+		const errors = validateCampaign( values, opts );
+		expect( errors ).not.toHaveProperty( 'amount' );
+	} );
+
+	it( 'The minimum amount should be rounded up to the nearest integer', () => {
+		values.amount = 30.99;
+
+		let opts = {
+			dailyBudget: 101,
+			formatAmount: mockFormatAmount,
+		};
+		const errors = validateCampaign( values, opts );
+
+		opts = {
+			dailyBudget: 102,
+			formatAmount: mockFormatAmount,
+		};
+		const errorsNext = validateCampaign( values, opts );
+
+		expect( errors ).toEqual( errorsNext );
+		expect( errors ).toHaveProperty( 'amount' );
+		expect( errors.amount ).toContain( 'is at least Rs 31' );
+	} );
 } );

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

@@ -135,6 +135,7 @@ const CreatePaidAdsCampaign = () => {
 				initialCampaign={ {
 					amount: highestDailyBudget,
 				} }
+				recommendedDailyBudget={ highestDailyBudget }
 				onSubmit={ handleSubmit }
 			>
 				<Stepper

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

@@ -33,6 +33,7 @@
 	recordStepperChangeEvent,
 	recordStepContinueEvent,
 } from '.~/utils/tracks';
+import useFetchBudgetRecommendation from '.~/hooks/useFetchBudgetRecommendation';
 
 const eventName = 'gla_paid_campaign_step';
 const eventContext = 'edit-ads';
@@ -71,7 +72,8 @@
 	} = useAppSelectDispatch( 'getCampaignAssetGroups', id );
 	const campaign = campaigns?.find( ( el ) => el.id === id );
 	const assetEntityGroup = assetEntityGroups?.at( 0 );
-
+	const { highestDailyBudget, hasFinishedResolution } =
+		useFetchBudgetRecommendation( campaign?.displayCountries );
 	useEffect( () => {
 		if ( campaign && campaign.type !== CAMPAIGN_TYPE_PMAX ) {
 			getHistory().replace( dashboardURL );
@@ -84,7 +86,11 @@
 		getHistory().push( url );
 	};
 
-	if ( ! loaded || ! hasResolvedAssetEntityGroups ) {
+	if (
+		! loaded ||
+		! hasResolvedAssetEntityGroups ||
+		! hasFinishedResolution
+	) {
 		return (
 			<>
 				<TopBar
@@ -181,6 +187,7 @@
 				initialCampaign={ {
 					amount: campaign.amount,
 				} }
+				recommendedDailyBudget={ highestDailyBudget }
 				assetEntityGroup={ assetEntityGroup }
 				onSubmit={ handleSubmit }
 			>

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

@@ -90,6 +90,7 @@ const SetupPaidAds = () => {
 			initialCampaign={ initialValues }
 			onChange={ handleChange }
 			onSubmit={ handleSubmit }
+			recommendedDailyBudget={ highestDailyBudget }
 		>
 			<AdsCampaign
 				headerTitle={ __(

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

@@ -140,6 +140,7 @@ export default function SetupPaidAds() {
 	return (
 		<CampaignAssetsForm
 			initialCampaign={ paidAds }
+			recommendedDailyBudget={ highestDailyBudget }
 			onChange={ ( _, values ) => {
 				if ( values.amount >= highestDailyBudget ) {
 					clientSession.setCampaign( values );