Hook up import/totals endpoint to Historical Data Import screen (https://github.com/woocommerce/woocommerce-admin/pull/2208)

* Hook up import/totals endpoint to Historical Data Import screen

* Remove getImportTotalsError and isGetImportTotalsRequesting selectors which were not used

* Remove duplicate style import

* Fix RTL displays

plugins/woocommerce-admin/client/analytics/settings/historical-data/index.js

@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import moment from 'moment';
 
 /**
@@ -15,13 +15,8 @@ import { stringifyQuery } from '@woocommerce/navigation';
 /**
  * Internal dependencies
  */
-import HistoricalDataActions from './actions';
+import { formatParams } from './utils';
-import HistoricalDataPeriodSelector from './period-selector';
+import HistoricalDataLayout from './layout';
-import HistoricalDataProgress from './progress';
-import HistoricalDataStatus from './status';
-import HistoricalDataSkipCheckbox from './skip-checkbox';
-import withSelect from 'wc-api/with-select';
-import './style.scss';
 
 class HistoricalData extends Component {
 	constructor() {
@@ -78,23 +73,7 @@ class HistoricalData extends Component {
 		this.setState( {
 			inProgress: true,
 		} );
-		const params = {};
+		const path = '/wc/v4/reports/import' + stringifyQuery( formatParams( period, skipChecked ) );
-		if ( skipChecked ) {
-			params.skip_existing = true;
-		}
-		if ( period.label !== 'all' ) {
-			if ( period.label === 'custom' ) {
-				const daysDifference = moment().diff(
-					moment( period.date, this.dateFormat ),
-					'days',
-					true
-				);
-				params.days = Math.ceil( daysDifference );
-			} else {
-				params.days = parseInt( period.label, 10 );
-			}
-		}
-		const path = '/wc/v4/reports/import' + stringifyQuery( params );
 		const errorMessage = __(
 			'There was a problem rebuilding your report data.',
 			'woocommerce-admin'
@@ -138,120 +117,24 @@ class HistoricalData extends Component {
 		} );
 	}
 
-	getStatus() {
-		const { customersProgress, customersTotal, ordersProgress, ordersTotal } = this.props;
-		const { inProgress } = this.state;
-
-		if ( inProgress ) {
-			if ( customersProgress < customersTotal ) {
-				return 'customers';
-			}
-			if ( ordersProgress < ordersTotal ) {
-				return 'orders';
-			}
-			return 'finalizing';
-		}
-		if (
-			( customersTotal > 0 || ordersTotal > 0 ) &&
-			customersProgress === customersTotal &&
-			ordersProgress === ordersTotal
-		) {
-			return 'finished';
-		}
-		return 'ready';
-	}
-
 	render() {
-		const {
-			customersProgress,
-			customersTotal,
-			hasImportedData,
-			importDate,
-			ordersProgress,
-			ordersTotal,
-		} = this.props;
 		const { inProgress, period, skipChecked } = this.state;
-		const hasImportedAllData =
-			! inProgress &&
-			hasImportedData &&
-			customersProgress === customersTotal &&
-			ordersProgress === ordersTotal;
-		// @todo When the import status endpoint is hooked up,
-		// this bool should be removed and assume it's true.
-		const showImportStatus = false;
 
 		return (
-			<Fragment>
+			<HistoricalDataLayout
-				<div className="woocommerce-setting">
+				dateFormat={ this.dateFormat }
-					<div className="woocommerce-setting__label" id="import-historical-data-label">
+				inProgress={ inProgress }
-						{ __( 'Import Historical Data:', 'woocommerce-admin' ) }
+				onPeriodChange={ this.onPeriodChange }
-					</div>
+				onDateChange={ this.onDateChange }
-					<div className="woocommerce-setting__input">
+				onSkipChange={ this.onSkipChange }
-						<span className="woocommerce-setting__help">
+				onDeletePreviousData={ this.onDeletePreviousData }
-							{ __(
+				onStartImport={ this.onStartImport }
-								'This tool populates historical analytics data by processing customers ' +
+				onStopImport={ this.onStopImport }
-									'and orders created prior to activating WooCommerce Admin.',
+				period={ period }
-								'woocommerce-admin'
+				skipChecked={ skipChecked }
-							) }
+			/>
-						</span>
-						{ ! hasImportedAllData && (
-							<Fragment>
-								<HistoricalDataPeriodSelector
-									dateFormat={ this.dateFormat }
-									disabled={ inProgress }
-									onPeriodChange={ this.onPeriodChange }
-									onDateChange={ this.onDateChange }
-									value={ period }
-								/>
-								<HistoricalDataSkipCheckbox
-									disabled={ inProgress }
-									checked={ skipChecked }
-									onChange={ this.onSkipChange }
-								/>
-								{ showImportStatus && (
-									<Fragment>
-										<HistoricalDataProgress
-											label={ __( 'Registered Customers', 'woocommerce-admin' ) }
-											progress={ customersProgress }
-											total={ customersTotal }
-										/>
-										<HistoricalDataProgress
-											label={ __( 'Orders', 'woocommerce-admin' ) }
-											progress={ ordersProgress }
-											total={ ordersTotal }
-										/>
-									</Fragment>
-								) }
-							</Fragment>
-						) }
-						{ showImportStatus && (
-							<HistoricalDataStatus importDate={ importDate } status={ this.getStatus() } />
-						) }
-					</div>
-				</div>
-				<HistoricalDataActions
-					customersProgress={ customersProgress }
-					customersTotal={ customersTotal }
-					hasImportedData={ hasImportedData }
-					inProgress={ inProgress }
-					onDeletePreviousData={ this.onDeletePreviousData }
-					onStartImport={ this.onStartImport }
-					onStopImport={ this.onStopImport }
-					ordersProgress={ ordersProgress }
-					ordersTotal={ ordersTotal }
-				/>
-			</Fragment>
 		);
 	}
 }
 
-export default withSelect( () => {
+export default HistoricalData;
-	return {
-		customersProgress: 0,
-		customersTotal: 0,
-		hasImportedData: false,
-		importDate: '2019-04-01',
-		ordersProgress: 0,
-		ordersTotal: 0,
-	};
-} )( HistoricalData );

plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js

@@ -0,0 +1,158 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { formatParams } from './utils';
+import HistoricalDataActions from './actions';
+import HistoricalDataPeriodSelector from './period-selector';
+import HistoricalDataProgress from './progress';
+import HistoricalDataStatus from './status';
+import HistoricalDataSkipCheckbox from './skip-checkbox';
+import withSelect from 'wc-api/with-select';
+import './style.scss';
+
+class HistoricalDataLayout extends Component {
+	getStatus() {
+		const {
+			customersProgress,
+			customersTotal,
+			inProgress,
+			ordersProgress,
+			ordersTotal,
+		} = this.props;
+
+		if ( inProgress ) {
+			if ( customersProgress < customersTotal ) {
+				return 'customers';
+			}
+			if ( ordersProgress < ordersTotal ) {
+				return 'orders';
+			}
+			return 'finalizing';
+		}
+		if (
+			( customersTotal > 0 || ordersTotal > 0 ) &&
+			customersProgress === customersTotal &&
+			ordersProgress === ordersTotal
+		) {
+			return 'finished';
+		}
+		return 'ready';
+	}
+
+	render() {
+		const {
+			customersProgress,
+			customersTotal,
+			dateFormat,
+			hasImportedData,
+			importDate,
+			inProgress,
+			onPeriodChange,
+			onDateChange,
+			onSkipChange,
+			onDeletePreviousData,
+			onStartImport,
+			onStopImport,
+			ordersProgress,
+			ordersTotal,
+			period,
+			skipChecked,
+		} = this.props;
+		const hasImportedAllData =
+			! inProgress &&
+			hasImportedData &&
+			customersProgress === customersTotal &&
+			ordersProgress === ordersTotal;
+		// @todo When the import status endpoint is hooked up,
+		// this bool should be removed and assume it's true.
+		const showImportStatus = false;
+
+		return (
+			<Fragment>
+				<div className="woocommerce-setting">
+					<div className="woocommerce-setting__label" id="import-historical-data-label">
+						{ __( 'Import Historical Data:', 'woocommerce-admin' ) }
+					</div>
+					<div className="woocommerce-setting__input">
+						<span className="woocommerce-setting__help">
+							{ __(
+								'This tool populates historical analytics data by processing customers ' +
+									'and orders created prior to activating WooCommerce Admin.',
+								'woocommerce-admin'
+							) }
+						</span>
+						{ ! hasImportedAllData && (
+							<Fragment>
+								<HistoricalDataPeriodSelector
+									dateFormat={ dateFormat }
+									disabled={ inProgress }
+									onPeriodChange={ onPeriodChange }
+									onDateChange={ onDateChange }
+									value={ period }
+								/>
+								<HistoricalDataSkipCheckbox
+									disabled={ inProgress }
+									checked={ skipChecked }
+									onChange={ onSkipChange }
+								/>
+								{ showImportStatus && (
+									<Fragment>
+										<HistoricalDataProgress
+											label={ __( 'Registered Customers', 'woocommerce-admin' ) }
+											progress={ customersProgress }
+											total={ customersTotal }
+										/>
+										<HistoricalDataProgress
+											label={ __( 'Orders', 'woocommerce-admin' ) }
+											progress={ ordersProgress }
+											total={ ordersTotal }
+										/>
+									</Fragment>
+								) }
+							</Fragment>
+						) }
+						{ showImportStatus && (
+							<HistoricalDataStatus importDate={ importDate } status={ this.getStatus() } />
+						) }
+					</div>
+				</div>
+				<HistoricalDataActions
+					customersProgress={ customersProgress }
+					customersTotal={ customersTotal }
+					hasImportedData={ hasImportedData }
+					inProgress={ inProgress }
+					onDeletePreviousData={ onDeletePreviousData }
+					onStartImport={ onStartImport }
+					onStopImport={ onStopImport }
+					ordersProgress={ ordersProgress }
+					ordersTotal={ ordersTotal }
+				/>
+			</Fragment>
+		);
+	}
+}
+
+export default withSelect( ( select, props ) => {
+	const { getImportTotals } = select( 'wc-api' );
+	const { period, skipChecked } = props;
+
+	const { customers: customersTotal, orders: ordersTotal } = getImportTotals(
+		formatParams( period, skipChecked )
+	);
+
+	return {
+		customersProgress: 0,
+		customersTotal,
+		hasImportedData: false,
+		importDate: '2019-04-01',
+		ordersProgress: 0,
+		ordersTotal,
+	};
+} )( HistoricalDataLayout );

plugins/woocommerce-admin/client/analytics/settings/historical-data/progress.js

@@ -3,20 +3,29 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { isNil } from 'lodash';
 
 function HistoricalDataProgress( { label, progress, total } ) {
+	const labelText = sprintf( __( 'Imported %(label)s', 'woocommerce-admin' ), {
+		label,
+	} );
+
+	const labelCounters =
+		! isNil( progress ) && ! isNil( total )
+			? sprintf( __( '%(progress)s of %(total)s', 'woocommerce-admin' ), {
+					progress,
+					total,
+				} )
+			: null;
+
 	return (
 		<div className="woocommerce-settings-historical-data__progress">
-			<span className="woocommerce-settings-historical-data__progress-label">
+			<span className="woocommerce-settings-historical-data__progress-label">{ labelText }</span>
-				{ sprintf( __( 'Imported %(label)s', 'woocommerce-admin' ), {
+			{ labelCounters && (
-					label,
+				<span className="woocommerce-settings-historical-data__progress-label">
-				} ) +
+					{ labelCounters }
-					' ' +
+				</span>
-					sprintf( __( '%(progress)s of %(total)s', 'woocommerce-admin' ), {
+			) }
-						progress,
-						total,
-					} ) }
-			</span>
 			<progress
 				className="woocommerce-settings-historical-data__progress-bar"
 				max={ total }

plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss

@@ -50,10 +50,14 @@
 }
 
 .woocommerce-settings-historical-data__progress-label {
-	display: block;
+	display: inline-block;
 	font-weight: bold;
 	margin-bottom: $gap-small;
 	margin-top: $gap-large;
+
+	& + & {
+		margin-left: 0.25em;
+	}
 }
 
 .woocommerce-settings-historical-data__progress-bar {

plugins/woocommerce-admin/client/analytics/settings/historical-data/utils.js

@@ -0,0 +1,22 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+
+export const formatParams = ( period, skipChecked ) => {
+	const params = {};
+	if ( skipChecked ) {
+		params.skip_existing = true;
+	}
+	if ( period.label !== 'all' ) {
+		if ( period.label === 'custom' ) {
+			const daysDifference = moment().diff( moment( period.date, this.dateFormat ), 'days', true );
+			params.days = Math.ceil( daysDifference );
+		} else {
+			params.days = parseInt( period.label, 10 );
+		}
+	}
+
+	return params;
+};

plugins/woocommerce-admin/client/wc-api/imports/index.js

@@ -0,0 +1,11 @@
+/** @format */
+/**
+ * Internal dependencies
+ */
+import operations from './operations';
+import selectors from './selectors';
+
+export default {
+	operations,
+	selectors,
+};

plugins/woocommerce-admin/client/wc-api/imports/operations.js

@@ -0,0 +1,43 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * WooCommerce dependencies
+ */
+import { stringifyQuery } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import { isResourcePrefix, getResourceIdentifier } from '../utils';
+import { NAMESPACE } from '../constants';
+
+function read( resourceNames, fetch = apiFetch ) {
+	const filteredNames = resourceNames.filter( name => isResourcePrefix( name, 'import-totals' ) );
+
+	return filteredNames.map( async resourceName => {
+		const query = getResourceIdentifier( resourceName );
+		const fetchArgs = {
+			parse: false,
+			path: NAMESPACE + '/reports/import/totals' + stringifyQuery( query ),
+		};
+
+		try {
+			const response = await fetch( fetchArgs );
+			const totals = await response.json();
+
+			return {
+				[ resourceName ]: totals,
+			};
+		} catch ( error ) {
+			return { [ resourceName ]: { error } };
+		}
+	} );
+}
+
+export default {
+	read,
+};

plugins/woocommerce-admin/client/wc-api/imports/selectors.js

@@ -0,0 +1,19 @@
+/** @format */
+
+/**
+ * Internal dependencies
+ */
+import { getResourceName } from '../utils';
+import { DEFAULT_REQUIREMENT } from '../constants';
+
+const getImportTotals = ( getResource, requireResource ) => (
+	query = {},
+	requirement = DEFAULT_REQUIREMENT
+) => {
+	const resourceName = getResourceName( 'import-totals', query );
+	return requireResource( requirement, resourceName ) || { customers: null, orders: null };
+};
+
+export default {
+	getImportTotals,
+};

plugins/woocommerce-admin/client/wc-api/wc-api-spec.js

@@ -4,6 +4,7 @@
  * Internal dependencies
  */
 import items from './items';
+import imports from './imports';
 import notes from './notes';
 import reportItems from './reports/items';
 import reportStats from './reports/stats';
@@ -21,6 +22,7 @@ function createWcApiSpec() {
 			...user.mutations,
 		},
 		selectors: {
+			...imports.selectors,
 			...items.selectors,
 			...notes.selectors,
 			...reportItems.selectors,
@@ -32,6 +34,7 @@ function createWcApiSpec() {
 		operations: {
 			read( resourceNames ) {
 				return [
+					...imports.operations.read( resourceNames ),
 					...items.operations.read( resourceNames ),
 					...notes.operations.read( resourceNames ),
 					...reportItems.operations.read( resourceNames ),
@@ -43,6 +46,7 @@ function createWcApiSpec() {
 			},
 			update( resourceNames, data ) {
 				return [
+					...imports.operations.update( resourceNames, data ),
 					...items.operations.update( resourceNames, data ),
 					...notes.operations.update( resourceNames, data ),
 					...settings.operations.update( resourceNames, data ),