Advanced Filters: Dates, fix query formats

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

@@ -281,6 +281,36 @@ export const advancedFilters = {
 				component: 'Date',
 			},
 		},
+		last_active: {
+			labels: {
+				add: __( 'Last active', 'wc-admin' ),
+				remove: __( 'Remove last active filter', 'wc-admin' ),
+				rule: __( 'Select a last active filter match', 'wc-admin' ),
+				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
+				title: __( 'Last active {{rule /}} {{filter /}}', 'wc-admin' ),
+				filter: __( 'Select registered date', 'wc-admin' ),
+			},
+			rules: [
+				{
+					value: 'before',
+					/* translators: Sentence fragment, logical, "Before" refers to customers registered before a given date. Screenshot for context: https://cloudup.com/cCsm3GeXJbE */
+					label: _x( 'Before', 'date', 'wc-admin' ),
+				},
+				{
+					value: 'after',
+					/* translators: Sentence fragment, logical, "after" refers to customers registered after a given date. Screenshot for context: https://cloudup.com/cCsm3GeXJbE */
+					label: _x( 'After', 'date', 'wc-admin' ),
+				},
+				{
+					value: 'between',
+					/* translators: Sentence fragment, logical, "Between" refers to average order value of a customer, between two given amounts. Screenshot for context: https://cloudup.com/cCsm3GeXJbE */
+					label: _x( 'Between', 'date', 'wc-admin' ),
+				},
+			],
+			input: {
+				component: 'Date',
+			},
+		},
 	},
 };
 /*eslint-enable max-len*/

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

@@ -46,6 +46,10 @@ export function getFilterQuery( endpoint, query ) {
 	return {};
 }
 
+// export function timeStampFilterDates() {
+//
+// }
+
 export function getQueryFromConfig( config, advancedFilters, query ) {
 	const queryValue = query[ config.param ];
 

plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js

@@ -27,7 +27,7 @@ class DateFilter extends Component {
 	constructor( { filter } ) {
 		super( ...arguments );
 
-		const [ isoAfter, isoBefore ] = ( filter.value || '' ).split( ',' );
+		const [ isoAfter, isoBefore ] = Array.isArray( filter.value ) ? filter.value : [ filter.value ];
 		const after = isoAfter ? toMoment( isoDateFormat, isoAfter ) : null;
 		const before = isoBefore ? toMoment( isoDateFormat, isoBefore ) : null;
 
@@ -58,7 +58,7 @@ class DateFilter extends Component {
 		const { before, after } = this.state;
 
 		// Return nothing if we're missing input(s)
-		if ( ! before || 'between' === rule.value && ! after ) {
+		if ( ! before || ( 'between' === rule.value && ! after ) ) {
 			return '';
 		}
 
@@ -75,13 +75,15 @@ class DateFilter extends Component {
 			} );
 		}
 
-		return textContent( interpolateComponents( {
-			mixedString: config.labels.title,
-			components: {
-				filter: <Fragment>{ filterStr }</Fragment>,
-				rule: <Fragment>{ rule.label }</Fragment>,
-			},
-		} ) );
+		return textContent(
+			interpolateComponents( {
+				mixedString: config.labels.title,
+				components: {
+					filter: <Fragment>{ filterStr }</Fragment>,
+					rule: <Fragment>{ rule.label }</Fragment>,
+				},
+			} )
+		);
 	}
 
 	onSingleDateChange( { date, text, error } ) {
@@ -118,7 +120,7 @@ class DateFilter extends Component {
 			}
 
 			if ( nextAfter && nextBefore ) {
-				onFilterChange( filter.key, 'value', [ nextAfter, nextBefore ].join( ',' ) );
+				onFilterChange( filter.key, 'value', [ nextAfter, nextBefore ] );
 			}
 		}
 	}
@@ -168,6 +170,18 @@ class DateFilter extends Component {
 		);
 	}
 
+	// onRuleChange( value ) {
+	// 	const { onFilterChange, filter } = this.props;
+	// 	if ( 'between' === filter.rule && 'between' !== value ) {
+	// 		this.setState( {
+	// 			after: null,
+	// 			afterText: '',
+	// 			afterError: null,
+	// 		} );
+	// 	}
+	// 	onFilterChange( filter.key, 'rule', value );
+	// }
+
 	render() {
 		const { config, filter, onFilterChange, isEnglish } = this.props;
 		const { key, rule } = filter;
@@ -199,9 +213,7 @@ class DateFilter extends Component {
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
 			<fieldset tabIndex="0">
-				<legend className="screen-reader-text">
-					{ labels.add || '' }
-				</legend>
+				<legend className="screen-reader-text">{ labels.add || '' }</legend>
 				<div
 					className={ classnames( 'woocommerce-filters-advanced__fieldset', {
 						'is-english': isEnglish,
@@ -209,11 +221,7 @@ class DateFilter extends Component {
 				>
 					{ children }
 				</div>
-				{ screenReaderText && (
-					<span className="screen-reader-text">
-						{ screenReaderText }
-					</span>
-				) }
+				{ screenReaderText && <span className="screen-reader-text">{ screenReaderText }</span> }
 			</fieldset>
 		);
 		/*eslint-enable jsx-a11y/no-noninteractive-tabindex*/