Merge pull request woocommerce/woocommerce-admin#1271 from woocommerce/update/customer-report-real-endpoint
Hook up customers report table to real data.
This commit is contained in:
commit
571ee1fee0
|
@ -18,7 +18,7 @@ export const filters = [
|
||||||
param: 'filter',
|
param: 'filter',
|
||||||
showFilters: () => true,
|
showFilters: () => true,
|
||||||
filters: [
|
filters: [
|
||||||
{ label: __( 'All Registered Customers', 'wc-admin' ), value: 'all' },
|
{ label: __( 'All Customers', 'wc-admin' ), value: 'all' },
|
||||||
{ label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' },
|
{ label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
@ -19,6 +19,11 @@ import CustomersReportTable from './table';
|
||||||
export default class CustomersReport extends Component {
|
export default class CustomersReport extends Component {
|
||||||
render() {
|
render() {
|
||||||
const { query, path } = this.props;
|
const { query, path } = this.props;
|
||||||
|
const tableQuery = {
|
||||||
|
orderby: 'date_registered',
|
||||||
|
order: 'desc',
|
||||||
|
...query,
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
@ -29,7 +34,7 @@ export default class CustomersReport extends Component {
|
||||||
showDatePicker={ false }
|
showDatePicker={ false }
|
||||||
advancedFilters={ advancedFilters }
|
advancedFilters={ advancedFilters }
|
||||||
/>
|
/>
|
||||||
<CustomersReportTable query={ query } />
|
<CustomersReportTable query={ tableQuery } />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,7 +43,7 @@ export default class CustomersReportTable extends Component {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: __( 'Sign Up', 'wc-admin' ),
|
label: __( 'Sign Up', 'wc-admin' ),
|
||||||
key: 'date_sign_up',
|
key: 'date_registered',
|
||||||
defaultSort: true,
|
defaultSort: true,
|
||||||
isSortable: true,
|
isSortable: true,
|
||||||
},
|
},
|
||||||
|
@ -95,26 +95,31 @@ export default class CustomersReportTable extends Component {
|
||||||
return customers.map( customer => {
|
return customers.map( customer => {
|
||||||
const {
|
const {
|
||||||
avg_order_value,
|
avg_order_value,
|
||||||
billing,
|
|
||||||
date_last_active,
|
date_last_active,
|
||||||
date_sign_up,
|
date_registered,
|
||||||
email,
|
email,
|
||||||
first_name,
|
name,
|
||||||
id,
|
user_id,
|
||||||
last_name,
|
|
||||||
orders_count,
|
orders_count,
|
||||||
username,
|
username,
|
||||||
total_spend,
|
total_spend,
|
||||||
|
postcode,
|
||||||
|
city,
|
||||||
|
country,
|
||||||
} = customer;
|
} = customer;
|
||||||
const { postcode, city, country } = billing || {};
|
|
||||||
const name = `${ first_name } ${ last_name }`;
|
|
||||||
|
|
||||||
const customerNameLink = (
|
const customerNameLink = user_id ? (
|
||||||
<Link href={ 'user-edit.php?user_id=' + id } type="wp-admin">
|
<Link href={ 'user-edit.php?user_id=' + user_id } type="wp-admin">
|
||||||
{ name }
|
{ name }
|
||||||
</Link>
|
</Link>
|
||||||
|
) : (
|
||||||
|
name
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const dateRegistered = date_registered
|
||||||
|
? formatDate( defaultTableDateFormat, date_registered )
|
||||||
|
: '—';
|
||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
display: customerNameLink,
|
display: customerNameLink,
|
||||||
|
@ -125,8 +130,8 @@ export default class CustomersReportTable extends Component {
|
||||||
value: username,
|
value: username,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
display: formatDate( defaultTableDateFormat, date_sign_up ),
|
display: dateRegistered,
|
||||||
value: date_sign_up,
|
value: date_registered,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
display: <a href={ 'mailto:' + email }>{ email }</a>,
|
display: <a href={ 'mailto:' + email }>{ email }</a>,
|
||||||
|
@ -182,7 +187,7 @@ export default class CustomersReportTable extends Component {
|
||||||
labels={ { placeholder: __( 'Search by customer name', 'wc-admin' ) } }
|
labels={ { placeholder: __( 'Search by customer name', 'wc-admin' ) } }
|
||||||
searchBy="customers"
|
searchBy="customers"
|
||||||
searchParam="name_includes"
|
searchParam="name_includes"
|
||||||
title={ __( 'Registered Customers', 'wc-admin' ) }
|
title={ __( 'Customers', 'wc-admin' ) }
|
||||||
columnPrefsKey="customers_report_columns"
|
columnPrefsKey="customers_report_columns"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -14,10 +14,6 @@ import { stringifyQuery } from '@woocommerce/navigation';
|
||||||
*/
|
*/
|
||||||
import { getResourceIdentifier, getResourcePrefix } from '../../utils';
|
import { getResourceIdentifier, getResourcePrefix } from '../../utils';
|
||||||
import { NAMESPACE } from '../../constants';
|
import { NAMESPACE } from '../../constants';
|
||||||
import { SWAGGERNAMESPACE } from 'store/constants';
|
|
||||||
|
|
||||||
// TODO: Remove once swagger endpoints are phased out.
|
|
||||||
const swaggerEndpoints = [ 'customers' ];
|
|
||||||
|
|
||||||
const typeEndpointMap = {
|
const typeEndpointMap = {
|
||||||
'report-items-query-orders': 'orders',
|
'report-items-query-orders': 'orders',
|
||||||
|
@ -42,17 +38,11 @@ function read( resourceNames, fetch = apiFetch ) {
|
||||||
const prefix = getResourcePrefix( resourceName );
|
const prefix = getResourcePrefix( resourceName );
|
||||||
const endpoint = typeEndpointMap[ prefix ];
|
const endpoint = typeEndpointMap[ prefix ];
|
||||||
const query = getResourceIdentifier( resourceName );
|
const query = getResourceIdentifier( resourceName );
|
||||||
|
|
||||||
const fetchArgs = {
|
const fetchArgs = {
|
||||||
parse: false,
|
parse: false,
|
||||||
|
path: NAMESPACE + '/reports/' + endpoint + stringifyQuery( query ),
|
||||||
};
|
};
|
||||||
|
|
||||||
if ( swaggerEndpoints.indexOf( endpoint ) >= 0 ) {
|
|
||||||
fetchArgs.url = SWAGGERNAMESPACE + 'reports/' + endpoint + stringifyQuery( query );
|
|
||||||
} else {
|
|
||||||
fetchArgs.path = NAMESPACE + '/reports/' + endpoint + stringifyQuery( query );
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch( fetchArgs );
|
const response = await fetch( fetchArgs );
|
||||||
const report = await response.json();
|
const report = await response.json();
|
||||||
|
|
Loading…
Reference in New Issue