diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js index 79904d53718..ef2b574ef8e 100644 --- a/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js +++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js @@ -4,11 +4,13 @@ */ import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; +import PropTypes from 'prop-types'; /** * WooCommerce dependencies */ -import { Section } from '@woocommerce/components'; +import { EmptyContent, Section } from '@woocommerce/components'; /** * Internal dependencies @@ -16,23 +18,35 @@ import { Section } from '@woocommerce/components'; import { ActivityCardPlaceholder } from '../../activity-card'; import ActivityHeader from '../../activity-header'; import ProductStockCard from './card'; +import { QUERY_DEFAULTS } from 'wc-api/constants'; +import withSelect from 'wc-api/with-select'; class StockPanel extends Component { render() { - const products = [ - { - id: 913, - parent_id: 911, - type: 'variation', - name: 'Octopus Tshirt', - permalink: '', - image: { - src: '/wp-content/uploads/2018/12/img-206939428-150x150.png', - }, - stock_quantity: 2, - }, - ]; - const isRequesting = false; + const { isError, isRequesting, products } = this.props; + + if ( isError ) { + const title = __( + 'There was an error getting your low stock products. Please try again.', + 'woocommerce-admin' + ); + const actionLabel = __( 'Reload', 'woocommerce-admin' ); + const actionCallback = () => { + // @todo Add tracking for how often an error is displayed, and the reload action is clicked. + window.location.reload(); + }; + + return ( + + + + ); + } return ( @@ -53,4 +67,33 @@ class StockPanel extends Component { } } -export default StockPanel; +StockPanel.propTypes = { + products: PropTypes.array.isRequired, + isError: PropTypes.bool, + isRequesting: PropTypes.bool, +}; + +StockPanel.defaultProps = { + products: [], + isError: false, + isRequesting: false, +}; + +export default compose( + withSelect( select => { + const { getItems, getItemsError, isGetItemsRequesting } = select( 'wc-api' ); + + const productsQuery = { + page: 1, + per_page: QUERY_DEFAULTS.pageSize, + low_in_stock: true, + status: 'publish', + }; + + const products = Array.from( getItems( 'products', productsQuery ).values() ); + const isError = Boolean( getItemsError( 'products', productsQuery ) ); + const isRequesting = isGetItemsRequesting( 'products', productsQuery ); + + return { products, isError, isRequesting }; + } ) +)( StockPanel );