{} }
+ dateQuery={ dateQuery }
+ isoDateFormat={ isoDateFormat }
/>
);
diff --git a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/index.js b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/index.js
index 8a876f0fbf8..133e021a653 100644
--- a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/index.js
@@ -7,11 +7,6 @@ import { __ } from '@wordpress/i18n';
import { Dropdown } from '@wordpress/components';
import PropTypes from 'prop-types';
-/**
- * WooCommerce dependencies
- */
-import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from '@woocommerce/date';
-
/**
* Internal dependencies
*/
@@ -36,16 +31,25 @@ class DateRangeFilterPicker extends Component {
this.resetCustomValues = this.resetCustomValues.bind( this );
}
+ formatDate( date, format ) {
+ if ( date && date._isAMomentObject && ( 'function' === typeof date.format ) ) {
+ return date.format( format );
+ }
+
+ return '';
+ }
+
getResetState() {
- const { period, compare, before, after } = getDateParamsFromQuery( this.props.query );
+ const { period, compare, before, after } = this.props.dateQuery;
+
return {
period,
compare,
before,
after,
focusedInput: 'startDate',
- afterText: after ? after.format( shortDateFormat ) : '',
- beforeText: before ? before.format( shortDateFormat ) : '',
+ afterText: this.formatDate( after, shortDateFormat ),
+ beforeText: this.formatDate( before, shortDateFormat ),
afterError: null,
beforeError: null,
};
@@ -56,7 +60,7 @@ class DateRangeFilterPicker extends Component {
}
onSelect( selectedTab, onClose ) {
- const { onRangeSelect } = this.props;
+ const { isoDateFormat, onRangeSelect } = this.props;
return event => {
const { period, compare, after, before } = this.state;
const data = {
@@ -64,8 +68,8 @@ class DateRangeFilterPicker extends Component {
compare,
};
if ( 'custom' === selectedTab ) {
- data.after = after ? after.format( isoDateFormat ) : '';
- data.before = before ? before.format( isoDateFormat ) : '';
+ data.after = this.formatDate( after, isoDateFormat );
+ data.before = this.formatDate( before, isoDateFormat );
} else {
data.after = undefined;
data.before = undefined;
@@ -76,10 +80,10 @@ class DateRangeFilterPicker extends Component {
}
getButtonLabel() {
- const { primary, secondary } = getCurrentDates( this.props.query );
+ const { primaryDate, secondaryDate } = this.props.dateQuery;
return [
- `${ primary.label } (${ primary.range })`,
- `${ __( 'vs.', 'woocommerce-admin' ) } ${ secondary.label } (${ secondary.range })`,
+ `${ primaryDate.label } (${ primaryDate.range })`,
+ `${ __( 'vs.', 'woocommerce-admin' ) } ${ secondaryDate.label } (${ secondaryDate.range })`,
];
}
@@ -161,13 +165,22 @@ DateRangeFilterPicker.propTypes = {
*/
onRangeSelect: PropTypes.func.isRequired,
/**
- * The query string represented in object form.
+ * The date query string represented in object form.
*/
- query: PropTypes.object,
-};
-
-DateRangeFilterPicker.defaultProps = {
- query: {},
+ dateQuery: PropTypes.shape( {
+ period: PropTypes.string.isRequired,
+ compare: PropTypes.string.isRequired,
+ before: PropTypes.object,
+ after: PropTypes.object,
+ primaryDate: PropTypes.shape( {
+ label: PropTypes.string.isRequired,
+ range: PropTypes.string.isRequired,
+ } ).isRequired,
+ secondaryDate: PropTypes.shape( {
+ label: PropTypes.string.isRequired,
+ range: PropTypes.string.isRequired,
+ } ).isRequired,
+ } ).isRequired,
};
export default DateRangeFilterPicker;
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/README.md b/plugins/woocommerce-admin/packages/components/src/filters/README.md
index 4e005adf454..db2645535eb 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/README.md
+++ b/plugins/woocommerce-admin/packages/components/src/filters/README.md
@@ -18,3 +18,4 @@ Name | Type | Default | Description
`onDateSelect` | Function | `() => {}` | Function to be called after date selection
`onFilterSelect` | Function | `null` | Function to be called after filter selection
`onAdvancedFilterAction` | Function | `null` | Function to be called after an advanced filter action has been taken
+`storeDate` | object | `null` | (required) Date utility function object bound to store settings.
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/docs/example.js b/plugins/woocommerce-admin/packages/components/src/filters/docs/example.js
index f641b81878f..4858a2a2b1b 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/docs/example.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/docs/example.js
@@ -9,6 +9,17 @@ import {
ReportFilters,
Section,
} from '@woocommerce/components';
+import {
+ getDateParamsFromQuery,
+ getCurrentDates,
+ isoDateFormat,
+ loadLocaleData,
+} from '@woocommerce/date';
+
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
const ORDER_STATUSES = {
cancelled: 'Cancelled',
@@ -20,6 +31,25 @@ const ORDER_STATUSES = {
refunded: 'Refunded',
};
+// Fetch locale from store settings and load for date functions.
+const localeSettings = {
+ userLocale: 'fr_FR',
+ weekdaysShort: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
+};
+loadLocaleData( localeSettings );
+
+// Fetch store default date range and compose with date utility functions.
+const defaultDateRange = 'period=month&compare=previous_year';
+const storeGetDateParamsFromQuery = partialRight( getDateParamsFromQuery, defaultDateRange );
+const storeGetCurrentDates = partialRight( getCurrentDates, defaultDateRange );
+
+// Package date utilities for filter picker component.
+const storeDate = {
+ getDateParamsFromQuery: storeGetDateParamsFromQuery,
+ getCurrentDates: storeGetCurrentDates,
+ isoDateFormat,
+};
+
const siteLocale = 'en_US';
const path = '';
@@ -180,7 +210,7 @@ export default () => (
Date picker only
Date picker & more filters
@@ -189,6 +219,7 @@ export default () => (
filters={ filters }
path={ path }
query={ query }
+ storeDate={ storeDate }
/>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/index.js b/plugins/woocommerce-admin/packages/components/src/filters/index.js
index 54fbeaf6a1a..29a9634fb53 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/index.js
@@ -83,7 +83,15 @@ class ReportFilters extends Component {
}
render() {
- const { filters, query, path, showDatePicker, onFilterSelect } = this.props;
+ const {
+ dateQuery,
+ filters,
+ query,
+ path,
+ showDatePicker,
+ onFilterSelect,
+ isoDateFormat,
+ } = this.props;
return (
{ __( 'Filters', 'woocommerce-admin' ) }
@@ -92,8 +100,9 @@ class ReportFilters extends Component {
{ showDatePicker && (
) }
{ filters.map( config => {
@@ -158,6 +167,27 @@ ReportFilters.propTypes = {
* The currency formatting instance for the site.
*/
currency: PropTypes.object.isRequired,
+ /**
+ * The date query string represented in object form.
+ */
+ dateQuery: PropTypes.shape( {
+ period: PropTypes.string.isRequired,
+ compare: PropTypes.string.isRequired,
+ before: PropTypes.object,
+ after: PropTypes.object,
+ primaryDate: PropTypes.shape( {
+ label: PropTypes.string.isRequired,
+ range: PropTypes.string.isRequired,
+ } ).isRequired,
+ secondaryDate: PropTypes.shape( {
+ label: PropTypes.string.isRequired,
+ range: PropTypes.string.isRequired,
+ } ).isRequired,
+ } ).isRequired,
+ /**
+ * ISO date format string.
+ */
+ isoDateFormat: PropTypes.string.isRequired,
};
ReportFilters.defaultProps = {
diff --git a/plugins/woocommerce-admin/packages/date/CHANGELOG.md b/plugins/woocommerce-admin/packages/date/CHANGELOG.md
index f9270bf821d..add5e7b3096 100644
--- a/plugins/woocommerce-admin/packages/date/CHANGELOG.md
+++ b/plugins/woocommerce-admin/packages/date/CHANGELOG.md
@@ -1,3 +1,7 @@
+# Unreleased
+
+- Decouple from global wcSettings object.
+
# 1.2.1
- Update dependencies.
diff --git a/plugins/woocommerce-admin/packages/date/src/index.js b/plugins/woocommerce-admin/packages/date/src/index.js
index 7313236b436..e0346c4d157 100644
--- a/plugins/woocommerce-admin/packages/date/src/index.js
+++ b/plugins/woocommerce-admin/packages/date/src/index.js
@@ -7,11 +7,6 @@ import { find } from 'lodash';
import { __ } from '@wordpress/i18n';
import { parse } from 'qs';
-/**
- * WooCommerce dependencies
- */
-import { getSetting } from '@woocommerce/wc-admin-settings';
-
export const isoDateFormat = 'YYYY-MM-DD';
/**
@@ -250,13 +245,16 @@ function getDateValue( period, compare, after, before ) {
/**
* Add default date-related parameters to a query object
*
- * @param {string} [period] - period value, ie `last_week`
- * @param {string} [compare] - compare value, ie `previous_year`
- * @param {string} [after] - date in iso date format, ie `2018-07-03`
- * @param {string} [before] - date in iso date format, ie `2018-07-03`
+ * @param {Object} query - query object
+ * @property {string} query.period - period value, ie `last_week`
+ * @property {string} query.compare - compare value, ie `previous_year`
+ * @property {string} query.after - date in iso date format, ie `2018-07-03`
+ * @property {string} query.before - date in iso date format, ie `2018-07-03`
+ * @param {string} defaultDateRange - the store's default date range
* @return {DateParams} - date parameters derived from query parameters with added defaults
*/
-export const getDateParamsFromQuery = ( { period, compare, after, before } ) => {
+export const getDateParamsFromQuery = ( query, defaultDateRange = 'period=month&compare=previous_year' ) => {
+ const { period, compare, after, before } = query;
if ( period && compare ) {
return {
period,
@@ -265,10 +263,6 @@ export const getDateParamsFromQuery = ( { period, compare, after, before } ) =>
before: before ? moment( before ) : null,
};
}
- const {
- woocommerce_default_date_range: defaultDateRange = 'period=month&compare=previous_year',
- } = getSetting( 'wcAdminSettings', {} );
-
const queryDefaults = parse( defaultDateRange.replace( /&/g, '&' ) );
return {
@@ -282,15 +276,16 @@ export const getDateParamsFromQuery = ( { period, compare, after, before } ) =>
/**
* Get Date Value Objects for a primary and secondary date range
*
- * @param {Object} query - date parameters derived from query parameters
- * @property {string} [period] - period value, ie `last_week`
- * @property {string} [compare] - compare value, ie `previous_year`
- * @property {string} [after] - date in iso date format, ie `2018-07-03`
- * @property {string} [before] - date in iso date format, ie `2018-07-03`
+ * @param {Object} query - query object
+ * @property {string} query.period - period value, ie `last_week`
+ * @property {string} query.compare - compare value, ie `previous_year`
+ * @property {string} query.after - date in iso date format, ie `2018-07-03`
+ * @property {string} query.before - date in iso date format, ie `2018-07-03`
+ * @param {string} defaultDateRange - the store's default date range
* @return {{primary: DateValue, secondary: DateValue}} - Primary and secondary DateValue objects
*/
-export const getCurrentDates = query => {
- const { period, compare, after, before } = getDateParamsFromQuery( query );
+export const getCurrentDates = ( query, defaultDateRange = 'period=month&compare=previous_year' ) => {
+ const { period, compare, after, before } = getDateParamsFromQuery( query, defaultDateRange );
const { primaryStart, primaryEnd, secondaryStart, secondaryEnd } = getDateValue(
period,
compare,
@@ -508,9 +503,10 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
* Gutenberg's moment instance is loaded with i18n values, which are
* PHP date formats, ie 'LLL: "F j, Y g:i a"'. Override those with translations
* of moment style js formats.
+ *
+ * @param {Object} config Locale config object, from store settings.
*/
-export function loadLocaleData() {
- const { userLocale, weekdaysShort } = getSetting( 'locale' );
+export function loadLocaleData( { userLocale, weekdaysShort } ) {
// Don't update if the wp locale hasn't been set yet, like in unit tests, for instance.
if ( 'en' !== moment.locale() ) {
moment.updateLocale( userLocale, {
@@ -526,8 +522,6 @@ export function loadLocaleData() {
}
}
-loadLocaleData();
-
export const dateValidationMessages = {
invalid: __( 'Invalid date', 'woocommerce-admin' ),
future: __( 'Select a date in the past', 'woocommerce-admin' ),
diff --git a/plugins/woocommerce-admin/packages/date/test/index.js b/plugins/woocommerce-admin/packages/date/test/index.js
index 1791ae25f35..f2ee3ebd425 100644
--- a/plugins/woocommerce-admin/packages/date/test/index.js
+++ b/plugins/woocommerce-admin/packages/date/test/index.js
@@ -8,7 +8,6 @@ import moment from 'moment';
* WooCommerce settings
*/
import {
- setSetting,
getSetting,
} from '@woocommerce/wc-admin-settings';
@@ -511,24 +510,20 @@ describe( 'loadLocaleData', () => {
const originalLocale = getSetting( 'locale' );
beforeEach( () => {
// Reset to default settings
- setSetting( 'locale', originalLocale );
+ loadLocaleData( originalLocale );
} );
it( 'should load locale data on user locale', () => {
- setSetting(
- 'locale',
- {
- userLocale: 'fr_FR',
- weekdaysShort: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
- }
- );
-
// initialize locale. Gutenberg normaly does this, but not in test environment.
moment.locale( 'fr_FR', {} );
- loadLocaleData();
- expect( moment.localeData().weekdaysMin() )
- .toEqual( getSetting( 'locale' ).weekdaysShort );
+ const weekdaysShort = [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ];
+
+ loadLocaleData( {
+ userLocale: 'fr_FR',
+ weekdaysShort,
+ } );
+ expect( moment.localeData().weekdaysMin() ).toEqual( weekdaysShort );
} );
} );