diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/index.js b/plugins/woocommerce-admin/client/analytics/settings/historical-data/index.js
index d2c6c2d7f2b..6f946dbac36 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/historical-data/index.js
+++ b/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 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';
+import { formatParams } from './utils';
+import HistoricalDataLayout from './layout';
class HistoricalData extends Component {
constructor() {
@@ -78,23 +73,7 @@ class HistoricalData extends Component {
this.setState( {
inProgress: true,
} );
- 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 );
- }
- }
- const path = '/wc/v4/reports/import' + stringifyQuery( params );
+ const path = '/wc/v4/reports/import' + stringifyQuery( formatParams( period, skipChecked ) );
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 (
-
-
-
- { __( 'Import Historical Data:', 'woocommerce-admin' ) }
-
-
-
- { __(
- 'This tool populates historical analytics data by processing customers ' +
- 'and orders created prior to activating WooCommerce Admin.',
- 'woocommerce-admin'
- ) }
-
- { ! hasImportedAllData && (
-
-
-
- { showImportStatus && (
-
-
-
-
- ) }
-
- ) }
- { showImportStatus && (
-
- ) }
-
-
-
-
+
);
}
}
-export default withSelect( () => {
- return {
- customersProgress: 0,
- customersTotal: 0,
- hasImportedData: false,
- importDate: '2019-04-01',
- ordersProgress: 0,
- ordersTotal: 0,
- };
-} )( HistoricalData );
+export default HistoricalData;
diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js b/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js
new file mode 100644
index 00000000000..eb59e6a4bfb
--- /dev/null
+++ b/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 (
+
+
+
+ { __( 'Import Historical Data:', 'woocommerce-admin' ) }
+
+
+
+ { __(
+ 'This tool populates historical analytics data by processing customers ' +
+ 'and orders created prior to activating WooCommerce Admin.',
+ 'woocommerce-admin'
+ ) }
+
+ { ! hasImportedAllData && (
+
+
+
+ { showImportStatus && (
+
+
+
+
+ ) }
+
+ ) }
+ { showImportStatus && (
+
+ ) }
+
+
+
+
+ );
+ }
+}
+
+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 );
diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/progress.js b/plugins/woocommerce-admin/client/analytics/settings/historical-data/progress.js
index a13fad14e0f..adb1dc9ac01 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/historical-data/progress.js
+++ b/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 (
-
- { sprintf( __( 'Imported %(label)s', 'woocommerce-admin' ), {
- label,
- } ) +
- ' ' +
- sprintf( __( '%(progress)s of %(total)s', 'woocommerce-admin' ), {
- progress,
- total,
- } ) }
-
+
{ labelText }
+ { labelCounters && (
+
+ { labelCounters }
+
+ ) }