Customers: add one advanced filter

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

@@ -2,9 +2,9 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
-
+import { getRequestByIdString } from '../../../lib/async-requests';
-export const showDatePicker = false;
+import { NAMESPACE } from '../../../store/constants';
 
 export const filters = [
 	{
@@ -12,6 +12,53 @@ export const filters = [
 		staticParams: [],
 		param: 'filter',
 		showFilters: () => true,
-		filters: [ { label: __( 'All Registered Customers', 'wc-admin' ), value: 'all' } ],
+		filters: [
+			{ label: __( 'All Registered Customers', 'wc-admin' ), value: 'all' },
+			{ label: __( 'Advanced Filters', 'wc-admin' ), value: 'advanced' },
+		],
 	},
 ];
+
+/*eslint-disable max-len*/
+export const advancedFilters = {
+	title: _x(
+		'Customers Match {{select /}} Filters',
+		'A sentence describing filters for Customers. See screen shot for context: https://cloudup.com/cCsm3GeXJbE',
+		'wc-admin'
+	),
+	filters: {
+		name: {
+			labels: {
+				add: __( 'Name', 'wc-admin' ),
+				placeholder: __( 'Search customer name', 'wc-admin' ),
+				remove: __( 'Remove customer name filter', 'wc-admin' ),
+				rule: __( 'Select a customer name filter match', 'wc-admin' ),
+				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
+				title: __( 'Name {{rule /}} {{filter /}}', 'wc-admin' ),
+				filter: __( 'Select customer name', 'wc-admin' ),
+			},
+			rules: [
+				{
+					value: 'includes',
+					/* translators: Sentence fragment, logical, "Includes" refers to orders including a given product(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */
+					label: _x( 'Includes', 'customer names', 'wc-admin' ),
+				},
+				{
+					value: 'excludes',
+					/* translators: Sentence fragment, logical, "Excludes" refers to orders excluding a given product(s). Screenshot for context: https://cloudup.com/cSsUY9VeCVJ */
+					label: _x( 'Excludes', 'customer names', 'wc-admin' ),
+				},
+			],
+			input: {
+				// Use products autocompleter for now, see https://github.com/woocommerce/wc-admin/issues/1029 for progress
+				component: 'Search',
+				type: 'products',
+				getLabels: getRequestByIdString( NAMESPACE + 'products', product => ( {
+					id: product.id,
+					label: product.name,
+				} ) ),
+			},
+		},
+	},
+};
+/*eslint-enable max-len*/

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

@@ -13,7 +13,7 @@ import { ReportFilters } from '@woocommerce/components';
 /**
  * Internal dependencies
  */
-import { filters, showDatePicker } from './config';
+import { filters, advancedFilters } from './config';
 import CustomersReportTable from './table';
 
 export default class CustomersReport extends Component {
@@ -26,7 +26,8 @@ export default class CustomersReport extends Component {
 					query={ query }
 					path={ path }
 					filters={ filters }
-					showDatePicker={ showDatePicker }
+					showDatePicker={ false }
+					advancedFilters={ advancedFilters }
 				/>
 				<CustomersReportTable query={ query } />
 			</Fragment>

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

@@ -21,6 +21,7 @@ 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';
+import * as customersConfig from 'analytics/report/customers/config';
 import * as reportsUtils from './utils';
 
 const reportConfigs = {
@@ -29,6 +30,7 @@ const reportConfigs = {
 	orders: ordersConfig,
 	products: productsConfig,
 	taxes: taxesConfig,
+	customers: customersConfig,
 };
 
 export function getFilterQuery( endpoint, query ) {
@@ -270,8 +272,8 @@ export function getTooltipValueFormat( type ) {
 	}
 }
 
-export function getReportTableQuery( urlQuery, query ) {
+export function getReportTableQuery( endpoint, urlQuery, query ) {
-	const filterQuery = getFilterQuery( 'products', urlQuery );
+	const filterQuery = getFilterQuery( endpoint, urlQuery );
 	const datesFromQuery = getCurrentDates( urlQuery );
 
 	return {
@@ -296,11 +298,9 @@ export function getReportTableQuery( urlQuery, query ) {
  * @return {Object} Object    Table data response
  */
 export function getReportTableData( endpoint, urlQuery, select, query = {} ) {
-	const { getReportItems, isReportItemsRequesting, isReportItemsError } = select(
+	const { getReportItems, isReportItemsRequesting, isReportItemsError } = select( 'wc-api' );
-		'wc-api'
-	);
 
-	const tableQuery = reportsUtils.getReportTableQuery( urlQuery, query );
+	const tableQuery = reportsUtils.getReportTableQuery( endpoint, urlQuery, query );
 	const response = {
 		query: tableQuery,
 		isRequesting: false,

plugins/woocommerce-admin/package-lock.json

@@ -6209,7 +6209,7 @@
       "dependencies": {
         "jsesc": {
           "version": "0.5.0",
-          "resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
           "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
           "dev": true
         },
@@ -6226,13 +6226,13 @@
         },
         "regjsgen": {
           "version": "0.2.0",
-          "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
           "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
           "dev": true
         },
         "regjsparser": {
           "version": "0.1.5",
-          "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
           "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
           "dev": true,
           "requires": {
@@ -7684,7 +7684,7 @@
     },
     "espree": {
       "version": "3.5.4",
-      "resolved": "http://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
       "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
       "requires": {
         "acorn": "^5.5.0",
@@ -14082,7 +14082,7 @@
       "dependencies": {
         "ansi-escapes": {
           "version": "1.4.0",
-          "resolved": "http://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
           "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
           "dev": true
         },
@@ -14144,7 +14144,7 @@
         },
         "opn": {
           "version": "4.0.2",
-          "resolved": "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
           "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
           "dev": true,
           "requires": {
@@ -14817,7 +14817,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -15319,7 +15319,7 @@
         },
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         },
@@ -20823,7 +20823,7 @@
     },
     "yargs": {
       "version": "11.1.0",
-      "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
       "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
       "requires": {
         "cliui": "^4.0.0",