112 lines
3.1 KiB
JavaScript
Executable File
112 lines
3.1 KiB
JavaScript
Executable File
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Component } from '@wordpress/element';
|
|
import { map } from 'lodash';
|
|
|
|
/**
|
|
* WooCommerce dependencies
|
|
*/
|
|
import { formatCurrency, getCurrencyFormatDecimal } from '@woocommerce/currency';
|
|
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
|
|
import { Link } from '@woocommerce/components';
|
|
import { numberFormat } from '@woocommerce/number';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import Leaderboard from 'analytics/components/leaderboard';
|
|
|
|
export class TopCustomers extends Component {
|
|
constructor( props ) {
|
|
super( props );
|
|
|
|
this.getRowsContent = this.getRowsContent.bind( this );
|
|
this.getHeadersContent = this.getHeadersContent.bind( this );
|
|
}
|
|
|
|
getHeadersContent() {
|
|
return [
|
|
{
|
|
label: __( 'Customer Name', 'woocommerce-admin' ),
|
|
key: 'name',
|
|
required: true,
|
|
isLeftAligned: true,
|
|
isSortable: false,
|
|
},
|
|
{
|
|
label: __( 'Orders', 'woocommerce-admin' ),
|
|
key: 'orders_count',
|
|
required: true,
|
|
defaultSort: true,
|
|
isSortable: false,
|
|
isNumeric: true,
|
|
},
|
|
{
|
|
label: __( 'Total Spend', 'woocommerce-admin' ),
|
|
key: 'total_spend',
|
|
isSortable: false,
|
|
isNumeric: true,
|
|
},
|
|
];
|
|
}
|
|
|
|
getRowsContent( data ) {
|
|
const { query } = this.props;
|
|
const persistedQuery = getPersistedQuery( query );
|
|
return map( data, row => {
|
|
const { id, total_spend, name, orders_count } = row;
|
|
|
|
const customerUrl = getNewPath( persistedQuery, 'analytics/customers', {
|
|
filter: 'single_customer',
|
|
customers: id,
|
|
} );
|
|
const customerLink = (
|
|
<Link href={ customerUrl } type="wc-admin">
|
|
{ name }
|
|
</Link>
|
|
);
|
|
|
|
return [
|
|
{
|
|
display: customerLink,
|
|
value: name,
|
|
},
|
|
{
|
|
display: numberFormat( orders_count ),
|
|
value: orders_count,
|
|
},
|
|
{
|
|
display: formatCurrency( total_spend ),
|
|
value: getCurrencyFormatDecimal( total_spend ),
|
|
},
|
|
];
|
|
} );
|
|
}
|
|
|
|
render() {
|
|
const { query, totalRows } = this.props;
|
|
const tableQuery = {
|
|
orderby: 'total_spend',
|
|
order: 'desc',
|
|
per_page: totalRows,
|
|
extended_info: false,
|
|
};
|
|
|
|
return (
|
|
<Leaderboard
|
|
endpoint="customers"
|
|
getHeadersContent={ this.getHeadersContent }
|
|
getRowsContent={ this.getRowsContent }
|
|
query={ query }
|
|
tableQuery={ tableQuery }
|
|
title={ __( 'Top Customers', 'woocommerce-admin' ) }
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TopCustomers;
|