Merge pull request woocommerce/woocommerce-admin#1216 from woocommerce/fix/date-range-dow

DateRange: use DayOfWeek from moment locale

plugins/woocommerce-admin/lib/client-assets.php

@@ -180,9 +180,6 @@ function wc_admin_print_script_settings() {
 		'embedBreadcrumbs' => wc_admin_get_embed_breadcrumbs(),
 		'siteLocale'       => esc_attr( get_bloginfo( 'language' ) ),
 		'currency'         => wc_admin_currency_settings(),
-		'date'             => array(
-			'dow' => get_option( 'start_of_week', 0 ),
-		),
 		'orderStatuses'    => format_order_statuses( wc_get_order_statuses() ),
 		'stockStatuses'    => wc_get_product_stock_status_options(),
 		'siteTitle'        => get_bloginfo( 'name' ),

plugins/woocommerce-admin/packages/components/src/calendar/date-range.js

@@ -152,7 +152,6 @@ class DateRange extends Component {
 						noBorder
 						initialVisibleMonth={ this.setTnitialVisibleMonth( isDoubleCalendar, before ) }
 						phrases={ phrases }
-						firstDayOfWeek={ Number( wcSettings.date.dow ) }
 					/>
 				</div>
 			</div>

plugins/woocommerce-admin/packages/components/src/chart/index.js

@@ -232,7 +232,7 @@ class Chart extends Component {
 		} = this.props;
 		let { yFormat } = this.props;
 		const legendDirection = mode === 'time-comparison' && isViewportWide ? 'row' : 'column';
-		const chartDirection = ( mode === 'item-comparison' ) && isViewportWide ? 'row' : 'column';
+		const chartDirection = mode === 'item-comparison' && isViewportWide ? 'row' : 'column';
 
 		const chartHeight = this.getChartHeight();
 		const legend = (
@@ -267,7 +267,7 @@ class Chart extends Component {
 		}
 		return (
 			<div className="woocommerce-chart">
-				{ mode !== 'block' &&
+				{ mode !== 'block' && (
 					<div className="woocommerce-chart__header">
 						<H className="woocommerce-chart__title">{ title }</H>
 						{ isViewportWide && legendDirection === 'row' && legend }
@@ -301,7 +301,7 @@ class Chart extends Component {
 							/>
 						</NavigableMenu>
 					</div>
-				}
+				) }
 				<Section component={ false }>
 					<div
 						className={ classNames(
@@ -343,7 +343,9 @@ class Chart extends Component {
 								/>
 							) }
 					</div>
-					{ ( ! isViewportWide || mode === 'block' ) && <div className="woocommerce-chart__footer">{ legend }</div> }
+					{ ( ! isViewportWide || mode === 'block' ) && (
+						<div className="woocommerce-chart__footer">{ legend }</div>
+					) }
 				</Section>
 			</div>
 		);

plugins/woocommerce-admin/packages/components/src/chart/style.scss

@@ -57,7 +57,7 @@
 	padding: 0;
 	width: 100%;
 	display: flex;
-    align-items: center;
+	align-items: center;
 	justify-content: center;
 	.components-spinner {
 		margin: 0;

plugins/woocommerce-admin/packages/date/src/index.js

@@ -490,15 +490,14 @@ export function getDateFormatsForInterval( interval, ticks = 0 ) {
 }
 
 /**
- * Gutenberg's moment instance is loaded with i18n values. If the locale isn't english
- * we can use that data and enhance it with additional translations
+ * 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.
  */
 export function loadLocaleData() {
-	const { date, l10n } = wcSettings;
-	const { userLocale, weekdaysShort } = l10n;
-
-	// Keep the default Momentjs English settings for any English
-	if ( ! userLocale.match( /en_/ ) ) {
+	const { userLocale, weekdaysShort } = wcSettings.l10n;
+	// 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, {
 			longDateFormat: {
 				L: __( 'MM/DD/YYYY', 'wc-admin' ),
@@ -507,17 +506,6 @@ export function loadLocaleData() {
 				LLLL: __( 'dddd, D MMMM YYYY LT', 'wc-admin' ),
 				LT: __( 'HH:mm', 'wc-admin' ),
 			},
-			calendar: {
-				lastDay: __( '[Yesterday at] LT', 'wc-admin' ),
-				lastWeek: __( '[Last] dddd [at] LT', 'wc-admin' ),
-				nextDay: __( '[Tomorrow at] LT', 'wc-admin' ),
-				nextWeek: __( 'dddd [at] LT', 'wc-admin' ),
-				sameDay: __( '[Today at] LT', 'wc-admin' ),
-				sameElse: __( 'L', 'wc-admin' ),
-			},
-			week: {
-				dow: Number( date.dow ),
-			},
 			weekdaysMin: weekdaysShort,
 		} );
 	}

plugins/woocommerce-admin/packages/date/test/index.js

@@ -455,28 +455,23 @@ describe( 'getRangeLabel', () => {
 describe( 'loadLocaleData', () => {
 	beforeEach( () => {
 		// Reset to default settings
-		wcSettings.date.dow = 0;
 		wcSettings.l10n = {
 			userLocale: 'en_US',
 			weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
 		};
 	} );
 
-	it( 'should leave default momentjs data unchanged for english languages', () => {
-		loadLocaleData();
-		expect( moment.locale() ).toBe( 'en' );
-	} );
-
-	it( "should load locale data on user locale other than 'en-*'", () => {
-		wcSettings.date.dow = 5;
+	it( 'should load locale data on user locale', () => {
 		wcSettings.l10n = {
 			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( wcSettings.l10n.weekdaysShort );
-		expect( moment.localeData().firstDayOfWeek() ).toBe( wcSettings.date.dow );
 	} );
 } );