Decouple date package from `wcSettings`. (https://github.com/woocommerce/woocommerce-admin/pull/3278)

* Decouple date package from wcSettings.

* Update missed documentation and example.

* Expect simpler prop values for date filter.

* Remove unused props from primary/secondary dates.

* Avoid introducing moment dependency for type checking.

* Handle null moment/date values in DateRangeFilterPicker.

* Fix missing ISO date format.

* Fix moment instance detection.

plugins/woocommerce-admin/client/analytics/components/report-chart/index.js

@@ -19,7 +19,7 @@ import {
 	getIntervalForQuery,
 	getChartTypeForQuery,
 	getPreviousDate,
-} from '@woocommerce/date';
+} from 'lib/date';
 import { Chart } from '@woocommerce/components';
 import { CURRENCY } from '@woocommerce/wc-admin-settings';
 

plugins/woocommerce-admin/client/analytics/components/report-filters/index.js

@@ -17,6 +17,7 @@ import { LOCALE } from '@woocommerce/wc-admin-settings';
  */
 import { recordEvent } from 'lib/tracks';
 import { Currency } from 'lib/currency-format';
+import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from 'lib/date';
 
 export default class ReportFilters extends Component {
 	constructor() {
@@ -64,6 +65,16 @@ export default class ReportFilters extends Component {
 
 	render() {
 		const { advancedFilters, filters, path, query, showDatePicker } = this.props;
+		const { period, compare, before, after } = getDateParamsFromQuery( query );
+		const { primary: primaryDate, secondary: secondaryDate } = getCurrentDates( query );
+		const dateQuery = {
+			period,
+			compare,
+			before,
+			after,
+			primaryDate,
+			secondaryDate,
+		};
 		return (
 			<Filters
 				query={ query }
@@ -76,6 +87,8 @@ export default class ReportFilters extends Component {
 				onDateSelect={ this.trackDateSelect }
 				onFilterSelect={ this.trackFilterSelect }
 				onAdvancedFilterAction={ this.trackAdvancedFilterAction }
+				dateQuery={ dateQuery }
+				isoDateFormat={ isoDateFormat }
 			/>
 		);
 	}

plugins/woocommerce-admin/client/analytics/components/report-summary/index.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 /**
  * WooCommerce dependencies
  */
-import { getDateParamsFromQuery } from '@woocommerce/date';
+import { getDateParamsFromQuery } from 'lib/date';
 import { getNewPath } from '@woocommerce/navigation';
 import { SummaryList, SummaryListPlaceholder, SummaryNumber } from '@woocommerce/components';
 import { calculateDelta, formatValue } from 'lib/number-format';

plugins/woocommerce-admin/client/analytics/report/coupons/table.js

@@ -10,7 +10,7 @@ import { map } from 'lodash';
  * WooCommerce dependencies
  */
 import { Date, Link } from '@woocommerce/components';
-import { defaultTableDateFormat } from '@woocommerce/date';
+import { defaultTableDateFormat } from 'lib/date';
 import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency-format';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { formatValue } from 'lib/number-format';

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

@@ -9,7 +9,7 @@ import { Tooltip } from '@wordpress/components';
 /**
  * WooCommerce dependencies
  */
-import { defaultTableDateFormat } from '@woocommerce/date';
+import { defaultTableDateFormat } from 'lib/date';
 import { formatCurrency, getCurrencyFormatDecimal } from 'lib/currency-format';
 import { Date, Link } from '@woocommerce/components';
 import { formatValue } from 'lib/number-format';

plugins/woocommerce-admin/client/analytics/report/downloads/table.js

@@ -10,7 +10,7 @@ import moment from 'moment';
 /**
  * WooCommerce dependencies
  */
-import { defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
+import { defaultTableDateFormat, getCurrentDates } from 'lib/date';
 import { Date, Link } from '@woocommerce/components';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { formatValue } from 'lib/number-format';

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -10,7 +10,7 @@ import { map } from 'lodash';
  * WooCommerce dependencies
  */
 import { Date, Link, OrderStatus, ViewMoreList } from '@woocommerce/components';
-import { defaultTableDateFormat } from '@woocommerce/date';
+import { defaultTableDateFormat } from 'lib/date';
 import { formatCurrency, renderCurrency } from 'lib/currency-format';
 import { formatValue } from 'lib/number-format';
 import { getSetting } from '@woocommerce/wc-admin-settings';

plugins/woocommerce-admin/client/analytics/report/revenue/table.js

@@ -11,7 +11,7 @@ import { get } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from '@woocommerce/date';
+import { appendTimestamp, defaultTableDateFormat, getCurrentDates } from 'lib/date';
 import { Date, Link } from '@woocommerce/components';
 import { formatCurrency, getCurrencyFormatDecimal, renderCurrency } from 'lib/currency-format';
 import { formatValue } from 'lib/number-format';

plugins/woocommerce-admin/client/analytics/settings/default-date.js

@@ -3,6 +3,12 @@
  * External dependencies
  */
 import { parse, stringify } from 'qs';
+
+/**
+ * Internal dependencies
+ */
+import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from 'lib/date';
+
 /**
  * WooCommerce dependencies
  */
@@ -18,7 +24,24 @@ const DefaultDate = ( { value, onChange } ) => {
 		} );
 	};
 	const query = parse( value.replace( /&/g, '&' ) );
-	return <DateRangeFilterPicker query={ query } onRangeSelect={ change } />;
+	const { period, compare, before, after } = getDateParamsFromQuery( query );
+	const { primary: primaryDate, secondary: secondaryDate } = getCurrentDates( query );
+	const dateQuery = {
+		period,
+		compare,
+		before,
+		after,
+		primaryDate,
+		secondaryDate,
+	};
+	return (
+		<DateRangeFilterPicker
+			query={ query }
+			onRangeSelect={ change }
+			dateQuery={ dateQuery }
+			isoDateFormat={ isoDateFormat }
+		/>
+	);
 };
 
 export default DefaultDate;

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

@@ -10,7 +10,7 @@ import { SelectControl } from '@wordpress/components';
  * WooCommerce dependencies
  */
 import { DatePicker } from '@woocommerce/components';
-import { dateValidationMessages } from '@woocommerce/date';
+import { dateValidationMessages } from 'lib/date';
 
 function HistoricalDataPeriodSelector( {
 	dateFormat,

plugins/woocommerce-admin/client/dashboard/customizable.js

@@ -25,6 +25,7 @@ import { recordEvent } from 'lib/tracks';
 import TaskList from './task-list';
 import { getTasks } from './task-list/tasks';
 import { isOnboardingEnabled } from 'dashboard/utils';
+import { getCurrentDates, getDateParamsFromQuery, isoDateFormat } from 'lib/date';
 
 class CustomizableDashboard extends Component {
 	constructor( props ) {
@@ -207,6 +208,17 @@ class CustomizableDashboard extends Component {
 			return <TaskList query={ query } />;
 		}
 
+		const { period, compare, before, after } = getDateParamsFromQuery( query );
+		const { primary: primaryDate, secondary: secondaryDate } = getCurrentDates( query );
+		const dateQuery = {
+			period,
+			compare,
+			before,
+			after,
+			primaryDate,
+			secondaryDate,
+		};
+
 		return (
 			<Fragment>
 				{ isOnboardingEnabled() &&
@@ -214,7 +226,7 @@ class CustomizableDashboard extends Component {
 					! taskListHidden &&
 					taskListCompleted && <TaskList query={ query } inline /> }
 
-				<ReportFilters query={ query } path={ path } />
+				<ReportFilters query={ query } path={ path } dateQuery={ dateQuery } isoDateFormat={ isoDateFormat } />
 				{ sections.map( ( section, index ) => {
 					if ( section.isVisible ) {
 						return (

plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js

@@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { EllipsisMenu, MenuItem, MenuTitle, SectionHeader } from '@woocommerce/components';
-import { getAllowedIntervalsForQuery } from '@woocommerce/date';
+import { getAllowedIntervalsForQuery } from 'lib/date';
 
 /**
  * Internal dependencies

plugins/woocommerce-admin/client/dashboard/store-performance/index.js

@@ -12,7 +12,7 @@ import { find } from 'lodash';
 /**
  * WooCommerce dependencies
  */
-import { getCurrentDates, appendTimestamp, getDateParamsFromQuery } from '@woocommerce/date';
+import { getCurrentDates, appendTimestamp, getDateParamsFromQuery } from 'lib/date';
 import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
 import { calculateDelta, formatValue } from 'lib/number-format';
 import { formatCurrency } from 'lib/currency-format';

plugins/woocommerce-admin/client/lib/date.js

@@ -0,0 +1,75 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getSetting } from '@woocommerce/wc-admin-settings';
+
+/**
+ * WooCommerce dependencies
+ */
+import {
+	isoDateFormat,
+	presetValues,
+	periods,
+	appendTimestamp,
+	toMoment,
+	getRangeLabel,
+	getLastPeriod,
+	getCurrentPeriod,
+	getDateParamsFromQuery,
+	getCurrentDates,
+	getDateDifferenceInDays,
+	getPreviousDate,
+	getAllowedIntervalsForQuery,
+	getIntervalForQuery,
+	getChartTypeForQuery,
+	dayTicksThreshold,
+	weekTicksThreshold,
+	defaultTableDateFormat,
+	getDateFormatsForInterval,
+	loadLocaleData,
+	dateValidationMessages,
+	validateDateInputForRange,
+} from '@woocommerce/date';
+
+// Load the store's locale.
+const localeSettings = getSetting( 'locale' );
+loadLocaleData( localeSettings );
+
+// Compose methods with store settings.
+const {
+	woocommerce_default_date_range: defaultDateRange = 'period=month&compare=previous_year',
+} = getSetting( 'wcAdminSettings', {} );
+const storeGetDateParamsFromQuery = partialRight( getDateParamsFromQuery, defaultDateRange );
+const storeGetCurrentDates = partialRight( getCurrentDates, defaultDateRange );
+
+// Export the expected API for the consuming app.
+export {
+	isoDateFormat,
+	presetValues,
+	periods,
+	appendTimestamp,
+	toMoment,
+	getRangeLabel,
+	getLastPeriod,
+	getCurrentPeriod,
+	storeGetDateParamsFromQuery as getDateParamsFromQuery,
+	storeGetCurrentDates as getCurrentDates,
+	getDateDifferenceInDays,
+	getPreviousDate,
+	getAllowedIntervalsForQuery,
+	getIntervalForQuery,
+	getChartTypeForQuery,
+	dayTicksThreshold,
+	weekTicksThreshold,
+	defaultTableDateFormat,
+	getDateFormatsForInterval,
+	loadLocaleData,
+	dateValidationMessages,
+	validateDateInputForRange,
+};

plugins/woocommerce-admin/client/wc-api/items/utils.js

@@ -7,7 +7,7 @@
 /**
  * WooCommerce dependencies
  */
-import { appendTimestamp, getCurrentDates } from '@woocommerce/date';
+import { appendTimestamp, getCurrentDates } from 'lib/date';
 
 /**
  * Returns leaderboard data to render a leaderboard table.

plugins/woocommerce-admin/client/wc-api/reports/utils.js

@@ -9,7 +9,7 @@ import moment from 'moment';
 /**
  * WooCommerce dependencies
  */
-import { appendTimestamp, getCurrentDates, getIntervalForQuery } from '@woocommerce/date';
+import { appendTimestamp, getCurrentDates, getIntervalForQuery } from 'lib/date';
 import { flattenFilters, getActiveFiltersFromQuery, getUrlKey } from '@woocommerce/navigation';
 import { formatCurrency } from 'lib/currency-format';
 

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 - Add `<TextControl />` component.
 - Require `currency` prop in `<AdvancedFilters />` component.
 - Remove call to `getAdminLink()` inside the `<Link />` component.
+- Add `storeDate` prop to `<ReportFilters />` and `<DateRangeFilterPicker />` components.
 
 # 4.0.0
 - Added a new `<ScrollTo />` component.

plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/README.md

@@ -6,21 +6,56 @@ Select a range of dates or single dates
 ## Usage
 
 ```jsx
+import {
+	getDateParamsFromQuery,
+	getCurrentDates,
+	isoDateFormat,
+	loadLocaleData,
+} from '@woocommerce/date';
+
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
+
+const query = {};
+
+// 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 );
+
+const defaultDateRange = 'period=month&compare=previous_year';
+const storeGetDateParamsFromQuery = partialRight( getDateParamsFromQuery, defaultDateRange );
+const storeGetCurrentDates = partialRight( getCurrentDates, defaultDateRange );
+const { period, compare, before, after } = storeGetDateParamsFromQuery( query );
+const { primary: primaryDate, secondary: secondaryDate } = storeGetCurrentDates( query );
+const dateQuery = {
+	period,
+	compare,
+	before,
+	after,
+	primaryDate,
+	secondaryDate,
+};
 
 <DateRangeFilterPicker
 	key="daterange"
 	onRangeSelect={ () => {} }
+	dateQuery={ dateQuery }
+	isoDateFormat={ isoDateFormat }
 />
 ```
 
 ### Props
 
-Required props are marked with `*`.
-
 Name    | Type     | Default | Description
 ------- | -------- | ------- | ---
-`query` | Object | `{}` | The query string represented in object form
+`isDateFormat` | string | `null` | (required) ISO date format string
 `onRangeSelect` | Function | `null` | Callback called when selection is made
+`dateQuery` | object | `null` | (required) Date initialization object
 
 ## URL as the source of truth
 

plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/docs/example.js

@@ -3,13 +3,47 @@
  * Internal dependencies
  */
 import { DateRangeFilterPicker } from '@woocommerce/components';
+import {
+	getDateParamsFromQuery,
+	getCurrentDates,
+	isoDateFormat,
+	loadLocaleData,
+} from '@woocommerce/date';
+
+/**
+ * External dependencies
+ */
+import { partialRight } from 'lodash';
 
 const query = {};
 
+// 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 );
+
+const defaultDateRange = 'period=month&compare=previous_year';
+const storeGetDateParamsFromQuery = partialRight( getDateParamsFromQuery, defaultDateRange );
+const storeGetCurrentDates = partialRight( getCurrentDates, defaultDateRange );
+const { period, compare, before, after } = storeGetDateParamsFromQuery( query );
+const { primary: primaryDate, secondary: secondaryDate } = storeGetCurrentDates( query );
+const dateQuery = {
+	period,
+	compare,
+	before,
+	after,
+	primaryDate,
+	secondaryDate,
+};
+
 export default () => (
 	<DateRangeFilterPicker
 		key="daterange"
 		query={ query }
 		onRangeSelect={ () => {} }
+		dateQuery={ dateQuery }
+		isoDateFormat={ isoDateFormat }
 	/>
 );

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;

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.

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 () => (
 	<div>
 		<H>Date picker only</H>
 		<Section component={ false }>
-			<ReportFilters path={ path } query={ query } />
+			<ReportFilters path={ path } query={ query } storeDate={ storeDate } />
 		</Section>
 
 		<H>Date picker & more filters</H>
@@ -189,6 +219,7 @@ export default () => (
 				filters={ filters }
 				path={ path }
 				query={ query }
+				storeDate={ storeDate }
 			/>
 		</Section>
 

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 (
 			<Fragment>
 				<H className="screen-reader-text">{ __( 'Filters', 'woocommerce-admin' ) }</H>
@@ -92,8 +100,9 @@ class ReportFilters extends Component {
 						{ showDatePicker && (
 							<DateRangeFilterPicker
 								key={ JSON.stringify( query ) }
-								query={ query }
+								dateQuery={ dateQuery }
 								onRangeSelect={ this.onRangeSelect }
+								isoDateFormat={ isoDateFormat }
 							/>
 						) }
 						{ 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 = {

plugins/woocommerce-admin/packages/date/CHANGELOG.md

@@ -1,3 +1,7 @@
+# Unreleased
+
+- Decouple from global wcSettings object.
+
 # 1.2.1
 
 - Update dependencies.

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' ),

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 );
 	} );
 } );