Fetch the number of syncable products in the ProductFeedStatusSection…

… component

js/src/setup-mc/setup-stepper/setup-paid-ads/product-feed-status-section.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { sprintf, __, _n } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
 
 /**
@@ -11,7 +12,7 @@ import Section from '.~/wcdl/section';
 import AppDocumentationLink from '.~/components/app-documentation-link';
 import SyncIcon from '.~/components/sync-icon';
 import AppTooltip from '.~/components/app-tooltip';
-import getNumberOfSyncProducts from '.~/utils/getNumberOfSyncProducts';
+import useSyncableProductsCalculation from '.~/hooks/useSyncableProductsCalculation';
 import './product-feed-status-section.scss';
 
 function ProductQuantity( { quantity } ) {
@@ -51,25 +52,12 @@ function ProductQuantity( { quantity } ) {
  * and show the number of products will be synced to Google Merchant Center.
  */
 export default function ProductFeedStatusSection() {
-	/*
-	const { data, hasFinishedResolution } = useAppSelectDispatch(
-		'getMCProductStatistics'
-	);
-	*/
-	// TODO: Replace the dummy data with the above code later to use the adjusted API.
-	const data = {
-		statistics: {
-			active: 1,
-			expiring: 2,
-			pending: 3,
-			disapproved: 4,
-			not_synced: 5,
-		},
-	};
-	const hasFinishedResolution = true;
-	const productQuantity = hasFinishedResolution
-		? getNumberOfSyncProducts( data.statistics )
-		: null;
+	const { retrieve, count } = useSyncableProductsCalculation();
+
+	// Retrieve the result of calculation that was requested when entering the Get Started page.
+	useEffect( () => {
+		retrieve();
+	}, [ retrieve ] );
 
 	return (
 		<Section
@@ -97,7 +85,7 @@ export default function ProductFeedStatusSection() {
 									'Your product listings are being uploaded',
 									'google-listings-and-ads'
 								) }
-								<ProductQuantity quantity={ productQuantity } />
+								<ProductQuantity quantity={ count } />
 							</Section.Card.Title>
 							{ __(
 								'Google will review your product listings within 3-5 days. Once approved, your products will automatically be live and searchable on Google. You’ll be notified if there are any product feed issues.',