woocommerce/plugins/woocommerce-admin/client/analytics/report/taxes/index.js

87 lines
2.1 KiB
JavaScript

/**
* External dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import PropTypes from 'prop-types';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { advancedFilters, charts, filters } from './config';
import getSelectedChart from '../../../lib/get-selected-chart';
import ReportChart from '../../components/report-chart';
import ReportSummary from '../../components/report-summary';
import TaxesReportTable from './table';
import ReportFilters from '../../components/report-filters';
class TaxesReport extends Component {
getChartMeta() {
const { query } = this.props;
const isCompareTaxView = query.filter === 'compare-taxes';
const mode = isCompareTaxView ? 'item-comparison' : 'time-comparison';
/* translators: %d: number of taxes */
const itemsLabel = __( '%d taxes', 'woocommerce' );
return {
itemsLabel,
mode,
};
}
render() {
const { isRequesting, query, path } = this.props;
const { mode, itemsLabel } = this.getChartMeta();
const chartQuery = {
...query,
};
if ( mode === 'item-comparison' ) {
chartQuery.segmentby = 'tax_rate_id';
}
return (
<Fragment>
<ReportFilters
query={ query }
path={ path }
filters={ filters }
advancedFilters={ advancedFilters }
report="taxes"
/>
<ReportSummary
charts={ charts }
endpoint="taxes"
query={ chartQuery }
selectedChart={ getSelectedChart( query.chart, charts ) }
filters={ filters }
advancedFilters={ advancedFilters }
/>
<ReportChart
charts={ charts }
filters={ filters }
advancedFilters={ advancedFilters }
mode={ mode }
endpoint="taxes"
query={ chartQuery }
path={ path }
isRequesting={ isRequesting }
itemsLabel={ itemsLabel }
selectedChart={ getSelectedChart( query.chart, charts ) }
/>
<TaxesReportTable
isRequesting={ isRequesting }
query={ query }
filters={ filters }
advancedFilters={ advancedFilters }
/>
</Fragment>
);
}
}
TaxesReport.propTypes = {
query: PropTypes.object.isRequired,
};
export default TaxesReport;