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 );