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/budget-section/budget-recommendation/index.js

@@ -10,7 +10,7 @@
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
+import useFetchBudgetRecommendation from '.~/hooks/useFetchBudgetRecommendation';
 import './index.scss';
 
 /*
@@ -51,7 +51,7 @@
 
 const BudgetRecommendation = ( props ) => {
 	const { countryCodes, dailyAverageCost = Infinity } = props;
-	const { data } = useFetchBudgetRecommendationEffect( countryCodes );
+	const { data } = useFetchBudgetRecommendation( countryCodes );
 	const map = useCountryKeyNameMap();
 
 	if ( ! data ) {

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

@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
+import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import { ASSET_GROUP_KEY, ASSET_FORM_KEY } from '.~/constants';
 import AdaptiveForm from '.~/components/adaptive-form';
-import validateCampaign from '.~/components/paid-ads/validateCampaign';
 import validateAssetGroup from '.~/components/paid-ads/validateAssetGroup';
+import useValidateCampaignWithCountryCodes from '.~/hooks/useValidateCampaignWithCountryCodes';
 
 /**
  * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
@@ -64,11 +65,13 @@
  * @augments AdaptiveForm
  * @param {Object} props React props.
  * @param {CampaignFormValues} props.initialCampaign Initial campaign values.
+ * @param {Function} [props.onChange] Callback when the form values change.
  * @param {AssetEntityGroup} [props.assetEntityGroup] The asset entity group to be used in initializing the form values for editing.
  */
 export default function CampaignAssetsForm( {
 	initialCampaign,
 	assetEntityGroup,
+	onChange = noop,
 	...adaptiveFormProps
 } ) {
 	const initialAssetGroup = useMemo( () => {
@@ -77,6 +80,14 @@
 
 	const [ baseAssetGroup, setBaseAssetGroup ] = useState( initialAssetGroup );
 	const [ hasImportedAssets, setHasImportedAssets ] = useState( false );
+	const [ countryCodes, setCountryCodes ] = useState( [] );
+	const { validateCampaignWithCountryCodes } =
+		useValidateCampaignWithCountryCodes( countryCodes );
+
+	const handleOnChange = ( _, values, arg ) => {
+		setCountryCodes( values.countryCodes );
+		onChange( _, values, arg );
+	};
 
 	const extendAdapter = ( formContext ) => {
 		const assetGroupErrors = validateAssetGroup( formContext.values );
@@ -120,8 +131,9 @@
 				...initialCampaign,
 				...initialAssetGroup,
 			} }
-			validate={ validateCampaign }
+			validate={ validateCampaignWithCountryCodes }
 			extendAdapter={ extendAdapter }
+			onChange={ handleOnChange }
 			{ ...adaptiveFormProps }
 		/>
 	);

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

@@ -10,6 +10,27 @@ import userEvent from '@testing-library/user-event';
  */
 import CampaignAssetsForm from './campaign-assets-form';
 
+jest.mock( '@woocommerce/settings', () => ( {
+	getSetting: jest
+		.fn()
+		.mockName( "getSetting( 'currency' )" )
+		.mockReturnValue( {
+			code: 'EUR',
+			symbol: '€',
+			precision: 2,
+			decimalSeparator: '.',
+			thousandSeparator: ',',
+			priceFormat: '%1$s %2$s',
+		} ),
+} ) );
+
+jest.mock( '.~/hooks/useFetchBudgetRecommendation', () => ( {
+	__esModule: true,
+	default: jest.fn().mockImplementation( () => {
+		return [ jest.fn(), null ];
+	} ),
+} ) );
+
 const alwaysValid = () => ( {} );
 
 describe( 'CampaignAssetsForm', () => {

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

@@ -1,26 +1,55 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
+ * @typedef {import('.~/components/types.js').ValidateCampaignOptions} ValidateCampaignOptions
  */
 
+// 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 ) || 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'
+			),
+		};
+	}
+
+	if (
+		Number.isFinite( values?.amount ) &&
+		Number.isFinite( opts?.dailyBudget )
+	) {
+		const { amount } = values;
+		const { dailyBudget, formatAmount } = opts;
+		const minAmount = Math.round( dailyBudget * BUDGET_MIN_PERCENT, 2 );
+
+		if ( amount < minAmount ) {
+			return {
+				amount: sprintf(
+					/* translators: %1$s: minimum daily budget */
+					__(
+						'Please make sure daily average cost is greater than %s.',
+						'google-listings-and-ads'
+					),
+					formatAmount( minAmount )
+				),
+			};
+		}
 	}
 
 	return errors;

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

@@ -72,4 +72,32 @@ 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', () => {
+		const mockFormatAmount = jest.fn().mockReturnValue( 'Rs 30' );
+		values.amount = 10;
+
+		const opts = {
+			dailyBudget: 100,
+			formatAmount: mockFormatAmount,
+		};
+
+		const errors = validateCampaign( values, opts );
+
+		expect( errors ).toHaveProperty( 'amount' );
+		expect( errors.amount ).toContain( 'is greater than Rs 30' );
+	} );
+
+	it( 'When a budget is provided and the amount is greater than the minimum, should pass', () => {
+		const mockFormatAmount = jest.fn().mockReturnValue( 'Rs 35' );
+		values.amount = 35;
+
+		const opts = {
+			dailyBudget: 100,
+			formatAmount: mockFormatAmount,
+		};
+
+		const errors = validateCampaign( values, opts );
+		expect( errors ).not.toHaveProperty( 'amount' );
+	} );
 } );

js/src/components/types.js

@@ -8,6 +8,12 @@
  * @property {number} amount The daily average cost amount.
  */
 
+/**
+ * @typedef {Object} ValidateCampaignOptions
+ * @property {string} Currency symbol to be used (e.g., 'USD').
+ * @property {number} dailyBudget Daily budget for the campaign.
+ */
+
 /**
  * @typedef {Object} AssetGroupFormValues
  * @property {string | null} final_url - The page URL on merchant's website that people reach when they click the ad.

js/src/data/action-types.js

@@ -50,6 +50,7 @@ const TYPES = {
 	UPSERT_TOUR: 'UPSERT_TOUR',
 	HYDRATE_PREFETCHED_DATA: 'HYDRATE_PREFETCHED_DATA',
 	RECEIVE_GOOGLE_ADS_ACCOUNT_STATUS: 'RECEIVE_GOOGLE_ADS_ACCOUNT_STATUS',
+	RECEIVE_ADS_BUDGET_RECOMMENDATIONS: 'RECEIVE_ADS_BUDGET_RECOMMENDATIONS',
 };
 
 export default TYPES;

js/src/data/actions.js

@@ -1287,3 +1287,28 @@
 		);
 	}
 }
+
+/**
+ * Action to receive ad budget recommendations.
+ *
+ * This function constructs an action object containing the type of the action,
+ * the provided country codes, currency, and recommendations.
+ *
+ * @param {string} countryCodesKey String identifying the country codes.
+ * @param {string} currency The currency code representing the currency of the recommendations.
+ * @param {Object} recommendations The budget recommendations object.
+ * @param {CountryCode} recommendations.country The country-specific recommendations.
+ * @param {number} recommendations.daily_budget The daily budget recommendation for the country.
+ */
+export function* receiveAdsBudgetRecommendations(
+	countryCodesKey,
+	currency,
+	recommendations
+) {
+	return {
+		type: TYPES.RECEIVE_ADS_BUDGET_RECOMMENDATIONS,
+		countryCodesKey,
+		currency,
+		recommendations,
+	};
+}

js/src/data/reducer.js

@@ -70,6 +70,7 @@
 			inviteLink: null,
 			step: null,
 		},
+		budgetRecommendations: {},
 	},
 };
 
@@ -510,6 +511,19 @@
 				.end();
 		}
 
+		case TYPES.RECEIVE_ADS_BUDGET_RECOMMENDATIONS: {
+			const { countryCodesKey, currency, recommendations } = action;
+
+			return setIn(
+				state,
+				[ 'ads', 'budgetRecommendations', countryCodesKey ],
+				{
+					currency,
+					recommendations,
+				}
+			);
+		}
+
 		// Page will be reloaded after all accounts have been disconnected, so no need to mutate state.
 		case TYPES.DISCONNECT_ACCOUNTS_ALL:
 		default:

js/src/data/resolvers.js

@@ -15,7 +15,7 @@
 } from '.~/constants';
 import TYPES from './action-types';
 import { API_NAMESPACE } from './constants';
-import { getReportKey } from './utils';
+import { getReportKey, getCountryCodesKey } from './utils';
 import { handleApiError } from '.~/utils/handleError';
 import { adaptAdsCampaign, adaptAssetGroup } from './adapters';
 import { fetchWithHeaders, awaitPromise } from './controls';
@@ -46,8 +46,15 @@
 	receiveMappingRules,
 	receiveStoreCategories,
 	receiveTour,
+	receiveAdsBudgetRecommendations,
 } from './actions';
 
+/**
+ * CountryCode
+ *
+ * @typedef {string} CountryCode Two-letter country code in ISO 3166-1 alpha-2 format. Example: 'US'.
+ */
+
 export function* getShippingRates() {
 	yield fetchShippingRates();
 }
@@ -534,3 +541,47 @@
 getGoogleAdsAccountStatus.shouldInvalidate = ( action ) => {
 	return action.type === TYPES.DISCONNECT_ACCOUNTS_GOOGLE_ADS;
 };
+
+/**
+ * Fetch ad budget recommendations for the specified country codes.
+ *
+ * @param {Array<CountryCode>} countryCodes An array of country codes for which to fetch budget recommendations.
+ */
+export function* getAdsBudgetRecommendations( countryCodes ) {
+	if ( ! countryCodes || ! countryCodes.length ) {
+		return;
+	}
+
+	const countryCodesKey = getCountryCodesKey( countryCodes );
+	const endpoint = `${ API_NAMESPACE }/ads/campaigns/budget-recommendation`;
+	const query = { country_codes: countryCodes };
+	const path = addQueryArgs( endpoint, query );
+
+	try {
+		const { data } = yield fetchWithHeaders( {
+			path,
+		} );
+
+		yield receiveAdsBudgetRecommendations(
+			countryCodesKey,
+			data.currency,
+			data.recommendations
+		);
+	} catch ( response ) {
+		// Intentionally silence the specific in case the no budget recommendations are found from the API.
+		if ( response.status === 404 ) {
+			return;
+		}
+
+		const bodyPromise = response?.json() || response?.text();
+		const error = yield awaitPromise( bodyPromise );
+
+		handleApiError(
+			error,
+			__(
+				'There was an error getting the budget recommendation.',
+				'google-listings-and-ads'
+			)
+		);
+	}
+}