Reorganizes the frontend code related to the calls of settings APIs

js/src/data/actions.js

@@ -325,10 +325,10 @@
 }
 
 /**
- * Save the the MC settings.
+ * Save the plugin settings.
  *
- * @param {SettingsData} settings settings
- * @return {Object} Action object to save target audience.
+ * @param {SettingsData} settings Plugin settings
+ * @return {Object} Action object to save the plugin settings.
  */
 export function* saveSettings( settings ) {
 	yield apiFetch( {
@@ -343,6 +343,18 @@
 	};
 }
 
+/**
+ * Sync the shipping and tax rate settings to Google Merchant Center.
+ *
+ * @throws Will throw an error if the request failed.
+ */
+export function* syncSettings() {
+	yield apiFetch( {
+		path: `${ API_NAMESPACE }/mc/settings/sync`,
+		method: 'POST',
+	} );
+}
+
 export function* fetchJetpackAccount() {
 	try {
 		const response = yield apiFetch( {

js/src/hooks/useSettings.js

@@ -6,21 +6,28 @@
 /**
  * Internal dependencies
  */
-import { STORE_KEY } from '~/data';
+import { STORE_KEY, useAppDispatch } from '~/data';
 
 /**
- * Returns an object `{ settings }` to be used in the Setup Free Listing page.
+ * Returns an object `{ settings, saveSettings, syncSettings }` to
+ * be used in the Setup Free Listing page.
  *
  * `settings` is the saved values retrieved from API.
+ * `saveSettings` action to save the plugin settings.
+ * `syncSettings` action to sync the shipping and tax rate settings to Google Merchant Center.
  */
 const useSettings = () => {
-	return useSelect( ( select ) => {
-		const settings = select( STORE_KEY ).getSettings();
+	const { saveSettings, syncSettings } = useAppDispatch();
 
-		return {
-			settings,
-		};
+	const settings = useSelect( ( select ) => {
+		return select( STORE_KEY ).getSettings();
 	}, [] );
+
+	return {
+		settings,
+		saveSettings,
+		syncSettings,
+	};
 };
 
 export default useSettings;

js/src/pages/edit-free-listings/index.js

@@ -14,7 +14,6 @@
 import SetupFreeListings from '~/components/free-listings/setup-free-listings';
 import useTargetAudienceFinalCountryCodes from '~/hooks/useTargetAudienceFinalCountryCodes';
 import useSettings from '~/hooks/useSettings';
-import useApiFetchCallback from '~/hooks/useApiFetchCallback';
 import useLayout from '~/hooks/useLayout';
 import useNavigateAwayPromptEffect from '~/hooks/useNavigateAwayPromptEffect';
 import useShippingRates from '~/hooks/useShippingRates';
@@ -49,8 +48,13 @@
 	const { targetAudience: savedTargetAudience, getFinalCountries } =
 		useTargetAudienceFinalCountryCodes();
 
-	const { settings: savedSettings } = useSettings();
-	const { saveTargetAudience, saveSettings } = useAppDispatch();
+	const {
+		settings: savedSettings,
+		saveSettings,
+		syncSettings,
+	} = useSettings();
+
+	const { saveTargetAudience } = useAppDispatch();
 	const { saveShippingRates } = useSaveShippingRates();
 	const { saveShippingTimes } = useSaveShippingTimes();
 
@@ -87,10 +91,6 @@
 		[ savedShippingTimes ]
 	);
 
-	const [ fetchSettingsSync ] = useApiFetchCallback( {
-		path: `/wc/gla/mc/settings/sync`,
-		method: 'POST',
-	} );
 	const { createNotice } = useDispatchCoreNotices();
 
 	// Check what've changed to show prompt, and send requests only to save changed things.
@@ -155,7 +155,7 @@
 			);
 
 			// Sync data once our changes are saved, even partially succesfully.
-			await fetchSettingsSync();
+			await syncSettings();
 
 			if ( errorMessage ) {
 				createNotice( 'error', errorMessage );

js/src/pages/onboarding/setup-stepper/saved-setup-stepper.js

@@ -38,7 +38,7 @@ import {
 const SavedSetupStepper = ( { savedStep } ) => {
 	const [ step, setStep ] = useState( savedStep );
 
-	const { settings } = useSettings();
+	const { settings, saveSettings } = useSettings();
 	const { data: suggestedAudience } = useTargetAudienceWithSuggestions();
 	const { targetAudience, getFinalCountries } =
 		useTargetAudienceFinalCountryCodes();
@@ -51,7 +51,7 @@ const SavedSetupStepper = ( { savedStep } ) => {
 		data: shippingTimes,
 	} = useShippingTimes();
 
-	const { saveTargetAudience, saveSettings } = useAppDispatch();
+	const { saveTargetAudience } = useAppDispatch();
 	const { saveShippingRates } = useSaveShippingRates();
 	const { saveShippingTimes } = useSaveShippingTimes();
 	const { createNotice } = useDispatchCoreNotices();

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import apiFetch from '@wordpress/api-fetch';
 import { useState } from '@wordpress/element';
 import { noop } from 'lodash';
 
@@ -18,7 +17,7 @@ import CampaignAssetsForm from '~/components/paid-ads/campaign-assets-form';
 import AppButton from '~/components/app-button';
 import useGoogleAdsAccountBillingStatus from '~/hooks/useGoogleAdsAccountBillingStatus';
 import { getProductFeedUrl } from '~/utils/urls';
-import { API_NAMESPACE } from '~/data/constants';
+import { useAppDispatch } from '~/data';
 import { GUIDE_NAMES, GOOGLE_ADS_BILLING_STATUS } from '~/constants';
 import { ACTION_COMPLETE, ACTION_SKIP } from './constants';
 import SkipButton from './skip-button';
@@ -48,17 +47,15 @@ export default function SetupPaidAds() {
 		useBudgetRecommendation( countryCodes );
 	const [ handleSetupComplete ] = useAdsSetupCompleteCallback();
 	const { billingStatus } = useGoogleAdsAccountBillingStatus();
+	const { syncSettings } = useAppDispatch();
 
 	const isBillingCompleted =
 		billingStatus?.status === GOOGLE_ADS_BILLING_STATUS.APPROVED;
 
 	const finishOnboardingSetup = async ( onBeforeFinish = noop ) => {
 		try {
 			await onBeforeFinish();
-			await apiFetch( {
-				path: `${ API_NAMESPACE }/mc/settings/sync`,
-				method: 'POST',
-			} );
+			await syncSettings();
 		} catch ( e ) {
 			setCompleting( null );