Adds UI wiring for Taxes chart and summary (https://github.com/woocommerce/woocommerce-admin/pull/779)

* Adds UI wiring for Taxes chart and summary

* Update to latest method for creating summary/chart

* Switch out API for swagger

* Fix copy pasta

* Implement swagger api

* Update config to match swagger API

* Code review fixes

* Remove store code as it isnt used

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

@@ -17,6 +17,7 @@ import OrdersReport from './orders';
 import ProductsReport from './products';
 import RevenueReport from './revenue';
 import CouponsReport from './coupons';
+import TaxesReport from './taxes';
 import useFilters from 'components/higher-order/use-filters';
 
 const REPORTS_FILTER = 'woocommerce-reports-list';
@@ -43,6 +44,11 @@ const getReports = () => {
 			title: __( 'Coupons', 'wc-admin' ),
 			component: CouponsReport,
 		},
+		{
+			report: 'taxes',
+			title: __( 'Taxes', 'wc-admin' ),
+			component: TaxesReport,
+		},
 	] );
 
 	return reports;

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

@@ -0,0 +1,41 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+export const charts = [
+	{
+		key: 'order_tax',
+		label: __( 'Order Tax', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'total_tax',
+		label: __( 'Total Tax', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'shipping_tax',
+		label: __( 'Shipping Tax', 'wc-admin' ),
+		type: 'currency',
+	},
+	{
+		key: 'orders_count',
+		label: __( 'Orders Count', 'wc-admin' ),
+		type: 'number',
+	},
+];
+
+export const filters = [
+	{
+		label: __( 'Show', 'wc-admin' ),
+		staticParams: [ 'chart' ],
+		param: 'filter',
+		showFilters: () => true,
+		filters: [ { label: __( 'All Taxes', 'wc-admin' ), value: 'all' } ],
+	},
+];

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

@@ -0,0 +1,45 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+import PropTypes from 'prop-types';
+
+/**
+ * WooCommerce dependencies
+ */
+import { ReportFilters } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import { charts, filters } from './config';
+import getSelectedChart from 'lib/get-selected-chart';
+import ReportChart from 'analytics/components/report-chart';
+import ReportSummary from 'analytics/components/report-summary';
+export default class TaxesReport extends Component {
+	render() {
+		const { query, path } = this.props;
+		return (
+			<Fragment>
+				<ReportFilters query={ query } path={ path } filters={ filters } />
+				<ReportSummary
+					charts={ charts }
+					endpoint="taxes"
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+				<ReportChart
+					charts={ charts }
+					endpoint="taxes"
+					path={ path }
+					query={ query }
+					selectedChart={ getSelectedChart( query.chart, charts ) }
+				/>
+			</Fragment>
+		);
+	}
+}
+TaxesReport.propTypes = {
+	query: PropTypes.object.isRequired,
+};

plugins/woocommerce-admin/client/store/constants.js

@@ -3,6 +3,7 @@
  */
 
 export const NAMESPACE = '/wc/v3/';
+export const SWAGGERNAMESPACE = 'https://virtserver.swaggerhub.com/peterfabian/wc-v3-api/1.0.0/';
 export const ERROR = 'ERROR';
 
 // WordPress & WooCommerce both set a hard limit of 100 for the per_page parameter

plugins/woocommerce-admin/client/store/reports/stats/resolvers.js

@@ -14,7 +14,7 @@ import { stringifyQuery } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
-import { NAMESPACE } from 'store/constants';
+import { NAMESPACE, SWAGGERNAMESPACE } from 'store/constants';
 
 export default {
 	// TODO: Use controls data plugin or fresh-data instead of async
@@ -27,6 +27,21 @@ export default {
 
 		let apiPath = endpoint + stringifyQuery( query );
 
+		// TODO: Remove once swagger endpoints are phased out.
+		const swaggerEndpoints = [ 'taxes' ];
+		if ( swaggerEndpoints.indexOf( endpoint ) >= 0 ) {
+			apiPath = SWAGGERNAMESPACE + 'reports/' + endpoint + '/stats' + stringifyQuery( query );
+			try {
+				const response = await fetch( apiPath );
+
+				const report = await response.json();
+				dispatch( 'wc-admin' ).setReportStats( endpoint, report, query );
+			} catch ( error ) {
+				dispatch( 'wc-admin' ).setReportStatsError( endpoint, query );
+			}
+			return;
+		}
+
 		if ( statEndpoints.indexOf( endpoint ) >= 0 ) {
 			apiPath = NAMESPACE + 'reports/' + endpoint + '/stats' + stringifyQuery( query );
 		}

plugins/woocommerce-admin/client/store/reports/utils.js

@@ -18,11 +18,13 @@ import { MAX_PER_PAGE } from 'store/constants';
 import * as couponsConfig from 'analytics/report/coupons/config';
 import * as ordersConfig from 'analytics/report/orders/config';
 import * as productsConfig from 'analytics/report/products/config';
+import * as taxesConfig from 'analytics/report/taxes/config';
 
 const reportConfigs = {
 	coupons: couponsConfig,
 	orders: ordersConfig,
 	products: productsConfig,
+	taxes: taxesConfig,
 };
 
 export function getFilterQuery( endpoint, query ) {

plugins/woocommerce-admin/lib/admin.php

@@ -109,6 +109,14 @@ function wc_admin_register_pages() {
 		)
 	);
 
+	wc_admin_register_page(
+		array(
+			'title'  => __( 'Taxes', 'wc-admin' ),
+			'parent' => '/analytics/revenue',
+			'path'   => '/analytics/taxes',
+		)
+	);
+
 	if ( defined( 'WP_DEBUG' ) && WP_DEBUG && defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
 		wc_admin_register_page(
 			array(