Add useValidateCampaignWithCountryCodes hook.

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

@@ -10,7 +10,7 @@ import GridiconNoticeOutline from 'gridicons/dist/notice-outline';
  * Internal dependencies
  */
 import useCountryKeyNameMap from '.~/hooks/useCountryKeyNameMap';
-import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
+import useFetchBudgetRecommendationEffect from '.~/hooks/useFetchBudgetRecommendationEffect';
 import './index.scss';
 
 /*

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

@@ -8,8 +8,8 @@ import { useState, useMemo } from '@wordpress/element';
  */
 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 +64,13 @@ function convertAssetEntityGroupToFormValues( assetEntityGroup = {} ) {
  * @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,
 	...adaptiveFormProps
 } ) {
 	const initialAssetGroup = useMemo( () => {
@@ -77,6 +79,14 @@ export default function CampaignAssetsForm( {
 
 	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 +130,9 @@ export default function CampaignAssetsForm( {
 				...initialCampaign,
 				...initialAssetGroup,
 			} }
-			validate={ validateCampaign }
+			validate={ validateCampaignWithCountryCodes }
 			extendAdapter={ extendAdapter }
+			onChange={ handleOnChange }
 			{ ...adaptiveFormProps }
 		/>
 	);

js/src/components/paid-ads/budget-section/budget-recommendation/useFetchBudgetRecommendationEffect.js → js/src/hooks/useFetchBudgetRecommendationEffect.js

@@ -7,7 +7,7 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import { API_NAMESPACE } from '.~/data/constants';
-import useApiFetchEffect from '.~/hooks/useApiFetchEffect';
+import useApiFetchEffect from './useApiFetchEffect';
 
 /**
  * @typedef { import(".~/data/actions").CountryCode } CountryCode

js/src/hooks/useHighestBudgetRecommendation.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import useFetchBudgetRecommendationEffect from './useFetchBudgetRecommendationEffect';
+import getHighestBudget from '.~/utils/getHighestBudget';
+import useStoreCurrency from './useStoreCurrency';
+
+/**
+ * @typedef { import(".~/data/actions").CountryCode } CountryCode
+ */
+
+/**
+ * Fetch the highest budget recommendation for countries in a side effect.
+ *
+ * @param {Array<CountryCode>} countryCodes Country code array.
+ * @return {Object} Budget recommendation.
+ */
+const useHighestBudgetRecommendation = ( countryCodes ) => {
+	const { code: currency, formatNumber } = useStoreCurrency();
+	const { data: budgetData } =
+		useFetchBudgetRecommendationEffect( countryCodes );
+	const budget = getHighestBudget( budgetData?.recommendations );
+
+	return {
+		dailyBudget: budget?.daily_budget,
+		currency,
+		formatNumber,
+	};
+};
+
+export default useHighestBudgetRecommendation;

js/src/hooks/useValidateCampaignWithCountryCodes.js

@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import useHighestBudgetRecommendation from './useHighestBudgetRecommendation';
+import validateCampaign from '.~/components/paid-ads/validateCampaign';
+
+/**
+ * @typedef {import('.~/components/types.js').CampaignFormValues} CampaignFormValues
+ */
+
+/**
+ * @typedef { import(".~/data/actions").CountryCode } CountryCode
+ */
+
+/**
+ * Validate campaign form. Accepts the form values object and returns errors object.
+ *
+ * @param {Array<CountryCode>} countryCodes Country code array.
+ * @return {Object} errors.
+ */
+const useValidateCampaignWithCountryCodes = ( countryCodes ) => {
+	const { currency, dailyBudget, formatNumber } =
+		useHighestBudgetRecommendation( countryCodes );
+
+	/**
+	 * Validate campaign form. Accepts the form values object and returns errors object.
+	 *
+	 * @param {CampaignFormValues} values Campaign form values.
+	 * @return {Object} errors.
+	 */
+	const validateCampaignWithCountryCodes = ( values ) => {
+		return validateCampaign( values, {
+			currency,
+			dailyBudget,
+			formatNumber,
+		} );
+	};
+
+	return { validateCampaignWithCountryCodes };
+};
+
+export default useValidateCampaignWithCountryCodes;

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

@@ -8,16 +8,14 @@ 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';
-import useStoreCurrency from '.~/hooks/useStoreCurrency';
+import useValidateCampaignWithCountryCodes from '.~/hooks/useValidateCampaignWithCountryCodes';
 
 /**
  * @typedef {import('.~/data/actions').CountryCode} CountryCode
@@ -62,8 +60,9 @@ export default function PaidAdsSetupSections( {
 	onStatesReceived,
 	countryCodes,
 } ) {
+	const { validateCampaignWithCountryCodes } =
+		useValidateCampaignWithCountryCodes( countryCodes );
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
-	const { code: currency, formatNumber } = useStoreCurrency();
 
 	const onStatesReceivedRef = useRef();
 	onStatesReceivedRef.current = onStatesReceived;
@@ -77,10 +76,6 @@ 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;
 
@@ -119,21 +114,13 @@ export default function PaidAdsSetupSections( {
 		amount: paidAds.amount,
 	};
 
-	const formOpts = {
-		dailyBudget: budget?.daily_budget,
-		currency,
-		formatNumber,
-	};
-
 	return (
 		<Form
 			initialValues={ initialValues }
 			onChange={ ( _, values, isValid ) => {
 				setPaidAds( { ...paidAds, ...values, isValid } );
 			} }
-			validate={ ( formValues ) =>
-				validateCampaign( formValues, formOpts )
-			}
+			validate={ validateCampaignWithCountryCodes }
 		>
 			{ ( formProps ) => {
 				return (