From a382fd61438245c3f39220f3df42d432fe79b980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Mon, 20 May 2019 22:50:25 +0200 Subject: [PATCH] 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 --- .../settings/historical-data/index.js | 151 ++--------------- .../settings/historical-data/layout.js | 158 ++++++++++++++++++ .../settings/historical-data/progress.js | 29 ++-- .../settings/historical-data/style.scss | 6 +- .../settings/historical-data/utils.js | 22 +++ .../client/wc-api/imports/index.js | 11 ++ .../client/wc-api/imports/operations.js | 43 +++++ .../client/wc-api/imports/selectors.js | 19 +++ .../client/wc-api/wc-api-spec.js | 4 + 9 files changed, 298 insertions(+), 145 deletions(-) create mode 100644 plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js create mode 100644 plugins/woocommerce-admin/client/analytics/settings/historical-data/utils.js create mode 100644 plugins/woocommerce-admin/client/wc-api/imports/index.js create mode 100644 plugins/woocommerce-admin/client/wc-api/imports/operations.js create mode 100644 plugins/woocommerce-admin/client/wc-api/imports/selectors.js 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 } + + ) } { + 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; +}; diff --git a/plugins/woocommerce-admin/client/wc-api/imports/index.js b/plugins/woocommerce-admin/client/wc-api/imports/index.js new file mode 100644 index 00000000000..cd0cff2f807 --- /dev/null +++ b/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, +}; diff --git a/plugins/woocommerce-admin/client/wc-api/imports/operations.js b/plugins/woocommerce-admin/client/wc-api/imports/operations.js new file mode 100644 index 00000000000..af6ac34adfc --- /dev/null +++ b/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, +}; diff --git a/plugins/woocommerce-admin/client/wc-api/imports/selectors.js b/plugins/woocommerce-admin/client/wc-api/imports/selectors.js new file mode 100644 index 00000000000..95d0643c05e --- /dev/null +++ b/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, +}; diff --git a/plugins/woocommerce-admin/client/wc-api/wc-api-spec.js b/plugins/woocommerce-admin/client/wc-api/wc-api-spec.js index 8280d72cd00..0088e4393c6 100644 --- a/plugins/woocommerce-admin/client/wc-api/wc-api-spec.js +++ b/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 ),