diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js
index 718436621a6..45f4b71fa47 100644
--- a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js
+++ b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js
@@ -61,7 +61,7 @@ class ReportTable extends Component {
isLoading={ isRequesting }
onQueryChange={ onQueryChange }
rows={ rows }
- rowsPerPage={ query.per_page }
+ rowsPerPage={ parseInt( query.per_page ) }
summary={ summary }
totalRows={ items.totalCount || 0 }
{ ...tableProps }
diff --git a/plugins/woocommerce-admin/client/analytics/report/products/table.js b/plugins/woocommerce-admin/client/analytics/report/products/table.js
index 53bdd2bd697..9f2f7fffb4c 100644
--- a/plugins/woocommerce-admin/client/analytics/report/products/table.js
+++ b/plugins/woocommerce-admin/client/analytics/report/products/table.js
@@ -91,7 +91,7 @@ export default class ProductsReportTable extends Component {
const {
product_id,
sku = '', // @TODO
- name,
+ extended_info,
items_sold,
gross_revenue,
orders_count,
@@ -100,6 +100,7 @@ export default class ProductsReportTable extends Component {
stock_status = 'outofstock', // @TODO
stock_quantity = '0', // @TODO
} = row;
+ const { name } = extended_info;
const ordersLink = getNewPath( persistedQuery, 'orders', {
filter: 'advanced',
product_includes: product_id,
@@ -209,7 +210,7 @@ export default class ProductsReportTable extends Component {
tableQuery={ {
orderby: query.orderby || 'items_sold',
order: query.order || 'desc',
- extended_product_info: true,
+ extended_info: true,
} }
title={ __( 'Products', 'wc-admin' ) }
/>
diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue/table.js b/plugins/woocommerce-admin/client/analytics/report/revenue/table.js
index c606c46ff88..41e9806793b 100644
--- a/plugins/woocommerce-admin/client/analytics/report/revenue/table.js
+++ b/plugins/woocommerce-admin/client/analytics/report/revenue/table.js
@@ -6,8 +6,7 @@ import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { format as formatDate } from '@wordpress/date';
import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { get, map } from 'lodash';
+import { get } from 'lodash';
/**
* WooCommerce dependencies
@@ -18,18 +17,25 @@ import {
getDateFormatsForInterval,
getIntervalForQuery,
} from '@woocommerce/date';
-import { Link, TableCard } from '@woocommerce/components';
+import { Link } from '@woocommerce/components';
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
-import { onQueryChange } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
-import ReportError from 'analytics/components/report-error';
import { QUERY_DEFAULTS } from 'store/constants';
import { numberFormat } from 'lib/number';
+import ReportTable from 'analytics/components/report-table';
+import withSelect from 'wc-api/with-select';
class RevenueReportTable extends Component {
+ constructor() {
+ super();
+
+ this.getHeadersContent = this.getHeadersContent.bind( this );
+ this.getRowsContent = this.getRowsContent.bind( this );
+ }
+
getHeadersContent() {
return [
{
@@ -97,7 +103,7 @@ class RevenueReportTable extends Component {
const currentInterval = getIntervalForQuery( query );
const formats = getDateFormatsForInterval( currentInterval );
- return map( data, row => {
+ return data.map( row => {
const {
coupons,
gross_revenue,
@@ -156,37 +162,16 @@ class RevenueReportTable extends Component {
}
render() {
- const { isTableDataError, isTableDataRequesting, query, tableData } = this.props;
-
- if ( isTableDataError ) {
- return ;
- }
-
- const tableQuery = {
- ...query,
- orderby: query.orderby || 'date',
- order: query.order || 'asc',
- };
-
- const headers = this.getHeadersContent();
- const rows = this.getRowsContent( get( tableData, [ 'data', 'intervals' ], [] ) );
- const rowsPerPage =
- ( tableQuery && tableQuery.per_page && parseInt( tableQuery.per_page ) ) ||
- QUERY_DEFAULTS.pageSize;
- const totalRows = get( tableData, [ 'totalResults' ], Object.keys( rows ).length );
+ const { query, tableData } = this.props;
return (
-
);
}
@@ -208,15 +193,20 @@ export default compose(
after: appendTimestamp( datesFromQuery.primary.after, 'start' ),
before: appendTimestamp( datesFromQuery.primary.before, 'end' ),
};
- const tableData = getReportStats( 'revenue', tableQuery );
- const isTableDataError = isReportStatsError( 'revenue', tableQuery );
- const isTableDataRequesting = isReportStatsRequesting( 'revenue', tableQuery );
+ const revenueData = getReportStats( 'revenue', tableQuery );
+ const isError = isReportStatsError( 'revenue', tableQuery );
+ const isRequesting = isReportStatsRequesting( 'revenue', tableQuery );
return {
- isTableDataError,
- isTableDataRequesting,
- tableQuery,
- tableData,
+ tableData: {
+ items: {
+ data: get( revenueData, [ 'data', 'intervals' ] ),
+ totalCount: get( revenueData, [ 'totalResults' ] ),
+ },
+ isError,
+ isRequesting,
+ query: tableQuery,
+ },
};
} )
)( RevenueReportTable );
diff --git a/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js b/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
index 9704576ea71..3399f7a9959 100644
--- a/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/top-selling-products/index.js
@@ -127,7 +127,7 @@ export default compose(
const endpoint = NAMESPACE + 'reports/products';
// @TODO We will need to add the date parameters from the Date Picker
// { after: '2018-04-22', before: '2018-05-06' }
- const query = { orderby: 'items_sold', per_page: 5, extended_product_info: 1 };
+ const query = { orderby: 'items_sold', per_page: 5, extended_info: 1 };
const stats = getReportStats( endpoint, query );
const isRequesting = isReportStatsRequesting( endpoint, query );
diff --git a/plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js b/plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js
index b368cc11079..e71be4c8c07 100644
--- a/plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/top-selling-products/test/index.js
@@ -68,7 +68,7 @@ describe( 'TopSellingProducts', () => {
const topSellingProducts = topSellingProductsWrapper.root.findByType( TopSellingProducts );
const endpoint = '/wc/v3/reports/products';
- const query = { orderby: 'items_sold', per_page: 5, extended_product_info: 1 };
+ const query = { orderby: 'items_sold', per_page: 5, extended_info: 1 };
expect( getReportStatsMock.mock.calls[ 0 ][ 1 ] ).toBe( endpoint );
expect( getReportStatsMock.mock.calls[ 0 ][ 2 ] ).toEqual( query );
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js
index da3c9d49655..cd73463c8d5 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/orders.js
@@ -5,33 +5,57 @@
import { __, _n, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { noop } from 'lodash';
+import interpolateComponents from 'interpolate-components';
/**
* WooCommerce dependencies
*/
import {
EllipsisMenu,
- Gravatar,
+ EmptyContent,
Flag,
+ Link,
MenuTitle,
MenuItem,
OrderStatus,
Section,
} from '@woocommerce/components';
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
+import { getAdminLink } from '@woocommerce/navigation';
/**
* Internal dependencies
*/
-import { ActivityCard } from '../activity-card';
+import { ActivityCard, ActivityCardPlaceholder } from '../activity-card';
import ActivityHeader from '../activity-header';
import ActivityOutboundLink from '../activity-outbound-link';
import { getOrderRefundTotal } from 'lib/order-values';
+import { QUERY_DEFAULTS } from 'store/constants';
+import withSelect from 'wc-api/with-select';
-function OrdersPanel( { orders } ) {
- const { data = [], isLoading } = orders;
+function OrdersPanel( { orders, isRequesting, isError } ) {
+ if ( isError ) {
+ const title = __( 'There was an error getting your orders. Please try again.', 'wc-admin' );
+ const actionLabel = __( 'Reload', 'wc-admin' );
+ const actionCallback = () => {
+ // TODO Add tracking for how often an error is displayed, and the reload action is clicked.
+ window.location.reload();
+ };
+
+ return (
+
+
+
+ );
+ }
const menu = (
@@ -40,12 +64,31 @@ function OrdersPanel( { orders } ) {
);
- const gravatarWithFlag = ( order, address ) => {
+ const orderCardTitle = ( order, address ) => {
+ const name = `${ address.first_name } ${ address.last_name }`;
+
return (
-
-
-
-
+
+ { interpolateComponents( {
+ mixedString: sprintf(
+ __(
+ /* eslint-disable-next-line max-len */
+ 'Order {{orderLink}}#%(orderNumber)s{{/orderLink}} placed by {{customerLink}}%(customerName)s{{/customerLink}} {{destinationFlag/}}',
+ 'wc-admin'
+ ),
+ {
+ orderNumber: order.number,
+ customerName: name,
+ }
+ ),
+ components: {
+ orderLink: ,
+ // @TODO: Hook up customer name link
+ customerLink: ,
+ destinationFlag: ,
+ },
+ } ) }
+
);
};
@@ -53,14 +96,18 @@ function OrdersPanel( { orders } ) {
- { isLoading ? (
- Loading
+ { isRequesting ? (
+
) : (
- { data.map( ( order, i ) => {
+ { orders.map( ( order, i ) => {
// We want the billing address, but shipping can be used as a fallback.
const address = { ...order.shipping, ...order.billing };
- const name = `${ address.first_name } ${ address.last_name }`;
const productsCount = order.line_items.reduce(
( total, line ) => total + line.quantity,
0
@@ -74,8 +121,7 @@ function OrdersPanel( { orders } ) {
@@ -96,8 +142,11 @@ function OrdersPanel( { orders } ) {
}
actions={
-