Free Listings + Paid Ads: Add the product feed status section UI

[eason9487]

Changes proposed in this Pull Request:

This PR implements the UI part of 📌 Product feed status section in #1610.

• Extract a code fragment from the sync-status.js as getNumberOfSyncProducts function.
• Implement ProductFeedStatusSection component and add it to the paid ads setup step of onboarding flow.

Screenshots:

📷 Normal view

📷 Hover on the "# products" text

Detailed test instructions:

1. Check if the visual result of the "Product feed status" section is close to the design in Figma.
2. Hover on the "# products" text to view the tooltip.

Changelog entry

[ianlin]

LGTM.

✅ The UI looks close to the design.
✅ The tooltip was displayed when hovering on the # products.

[ianlin]

💅 Since the type of ProductStatistics is defined, it would be nice to add some doc comments in the below function that is using this type.

google-listings-and-ads/js/src/data/actions.js

Line 892 in 9333fa5

export function* receiveMCProductStatistics( mcProductStatistics ) {

[eason9487]

Added in 4566683.

[ianlin]

❔ Just wanted to make sure my understanding is right. The API mc/product-statistics would only be returning data after we call mc/settings/sync, so the comment Replace the dummy data with the above code later to use the adjusted API. means we would make a POST request to mc/settings/sync later, right?

[eason9487]

Yes, as per my test from the frontend side, it has to call mc/settings/sync before getting statistics from mc/product-statistics, so the frontend side will call mc/settings/sync when entering step 4. And the mc/product-statistics seems to check whether the MC_SETUP_COMPLETED_AT flag is set before returning, thus, we will need the related adjustment in this project as well.