Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Aug 18, 2022
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9333fa5
Extract a code fragment from the sync-status.js as `getNumberOfSyncPr…
eason9487 Aug 17, 2022
603438a
Implement ProductFeedStatusSection component and add it to the paid a…
eason9487 Aug 17, 2022
4566683
Add JSDoc for more functions that also relate to the `ProductStatisti…
eason9487 Aug 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions js/src/data/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,24 @@ export function handleFetchError( error, message ) {
* @property {boolean} [contact_info_visible] Whether the phone number, email, and/or address are visible on the website.
*/

/**
* @typedef {Object} ProductStatisticsDetails
* @property {number} active Number of active products.
* @property {number} expiring Number of expiring products.
* @property {number} pending Number of pending products.
* @property {number} disapproved Number of disapproved products.
* @property {number} not_synced Number of not synced products.
*/

/**
* Product status statistics on Google Merchant Center
*
* @typedef {Object} ProductStatistics
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💅 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 ) {

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in 4566683.

* @property {number} scheduled_sync Number of scheduled jobs which will sync products to Google.
* @property {number} timestamp Timestamp reflecting when the product status statistics were last generated.
* @property {ProductStatisticsDetails} statistics Statistics information of product status on Google Merchant Center.
*/

/**
*
* @return {Array<ShippingRate>} Array of individual shipping rates.
Expand Down
20 changes: 7 additions & 13 deletions js/src/product-feed/product-statistics/status-box/sync-status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@ import Status from '.~/product-feed/product-statistics/status-box/status';
import { glaData } from '.~/constants';
import SyncIcon from '.~/components/sync-icon';
import SuccessIcon from '.~/components/success-icon';
import getNumberOfSyncProducts from '.~/utils/getNumberOfSyncProducts';

/**
* @typedef {import('.~/data/actions').ProductStatistics } ProductStatistics
*/

/**
* Returns the text as well as the icon an description for the Sync Status
* based on the `scheduled_sync` value as the synced number of products.
*
* @param {Object} data Data with the sync information
* @param {number} data.scheduled_sync Amount of scheduled jobs which will sync products to Google.
* @param {Object} data.statistics Merchant Center product status statistics information.
* @param {number} data.timestamp Timestamp reflecting when the product status statistics were last generated.
* @param {ProductStatistics} data Product status statistics on Google Merchant Center
* @return {Object} The icon, status and description of the sync process.
*/
function getSyncResult( {
Expand All @@ -36,15 +38,7 @@ function getSyncResult( {
};
}

const totalSynced = Object.entries( statistics ).reduce(
( sum, [ key, num ] ) => {
if ( key === 'not_synced' ) {
return sum;
}
return sum + num;
},
0
);
const totalSynced = getNumberOfSyncProducts( statistics );

return {
Icon: SuccessIcon,
Expand Down
18 changes: 18 additions & 0 deletions js/src/utils/getNumberOfSyncProducts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* @typedef {import('.~/data/actions').ProductStatisticsDetails } ProductStatisticsDetails
*/

/**
* Return the total number of syncing/synced products except for the `not_synced` category.
*
* @param {ProductStatisticsDetails} statistics The statistics data of scheduled synchronized products.
* @return {number} Number of syncing/synced products.
*/
export default function getNumberOfSyncProducts( statistics ) {
return Object.entries( statistics ).reduce( ( sum, [ key, num ] ) => {
if ( key === 'not_synced' ) {
return sum;
}
return sum + num;
}, 0 );
}