Merge pull request woocommerce/woocommerce-admin#158 from woocommerce/add/locale-data-moment

Date: Load locale data to moment

plugins/woocommerce-admin/client/components/calendar/index.js

@@ -158,6 +158,7 @@ class DateRange extends Component {
 						noBorder
 						initialVisibleMonth={ () => after || moment() }
 						phrases={ phrases }
+						firstDayOfWeek={ Number( wcSettings.date.dow ) }
 					/>
 				</div>
 			</Fragment>

plugins/woocommerce-admin/client/lib/currency/index.js

@@ -13,7 +13,7 @@ import { get, isNaN } from 'lodash';
  * @returns {?String}                  A formatted string.
  */
 export function formatCurrency( number, currency ) {
-	const locale = wcSettings.locale || 'en-US'; // Default so we don't break.
+	const locale = wcSettings.siteLocale || 'en-US'; // Default so we don't break.
 
 	// default to wcSettings if currency is not passed in
 	if ( ! currency ) {

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

@@ -5,6 +5,7 @@
 import moment from 'moment';
 import { find } from 'lodash';
 import { __ } from '@wordpress/i18n';
+import { getSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -238,3 +239,37 @@ export const getCurrentDates = ( { period, compare, after, before } ) => {
 		},
 	};
 };
+
+export function loadLocaleData() {
+	const { date } = wcSettings;
+	const settings = getSettings();
+	const userLocale = settings.l10n.locale;
+	const { weekdaysShort } = settings.l10n;
+
+	// Keep the default Momentjs English settings for any English
+	if ( ! userLocale.match( /en_/ ) ) {
+		moment.updateLocale( userLocale, {
+			longDateFormat: {
+				L: __( 'MM/DD/YYYY', 'woo-dash' ),
+				LL: __( 'MMMM D, YYYY', 'woo-dash' ),
+				LLL: __( 'D MMMM YYYY LT', 'woo-dash' ),
+				LLLL: __( 'dddd, D MMMM YYYY LT', 'woo-dash' ),
+				LT: __( 'HH:mm', 'woo-dash' ),
+			},
+			calendar: {
+				lastDay: __( '[Yesterday at] LT', 'woo-dash' ),
+				lastWeek: __( '[Last] dddd [at] LT', 'woo-dash' ),
+				nextDay: __( '[Tomorrow at] LT', 'woo-dash' ),
+				nextWeek: __( 'dddd [at] LT', 'woo-dash' ),
+				sameDay: __( '[Today at] LT', 'woo-dash' ),
+				sameElse: __( 'L', 'woo-dash' ),
+			},
+			week: {
+				dow: Number( date.dow ),
+			},
+			weekdaysMin: weekdaysShort,
+		} );
+	}
+}
+
+loadLocaleData();

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

@@ -3,11 +3,12 @@
  * External dependencies
  */
 import moment from 'moment';
+import { setSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
  */
-import { toMoment, getLastPeriod, getCurrentPeriod, getRangeLabel } from 'lib/date';
+import { toMoment, getLastPeriod, getCurrentPeriod, getRangeLabel, loadLocaleData } from 'lib/date';
 
 describe( 'toMoment', () => {
 	it( 'should pass through a valid Moment object as an argument', () => {
@@ -418,3 +419,127 @@ describe( 'getRangeLabel', () => {
 		expect( label ).toBe( 'Apr 1, 2017 - May 15, 2018' );
 	} );
 } );
+
+describe( 'loadLocaleData', () => {
+	beforeEach( () => {
+		// Reset to default settings
+		setSettings( {
+			l10n: {
+				locale: 'en_US',
+				months: [
+					'January',
+					'February',
+					'March',
+					'April',
+					'May',
+					'June',
+					'July',
+					'August',
+					'September',
+					'October',
+					'November',
+					'December',
+				],
+				monthsShort: [
+					'Jan',
+					'Feb',
+					'Mar',
+					'Apr',
+					'May',
+					'Jun',
+					'Jul',
+					'Aug',
+					'Sep',
+					'Oct',
+					'Nov',
+					'Dec',
+				],
+				weekdays: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
+				weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
+				meridiem: { am: 'am', pm: 'pm', AM: 'AM', PM: 'PM' },
+				relative: { future: ' % s from now', past: '% s ago' },
+			},
+			formats: {
+				time: 'g: i a',
+				date: 'F j, Y',
+				datetime: 'F j, Y g: i a',
+			},
+			timezone: { offset: '0', string: '' },
+		} );
+
+		wcSettings = {
+			adminUrl: 'https://vagrant.local/wp/wp-admin/',
+			locale: 'en-US',
+			currency: { code: 'USD', precision: 2, symbol: '$' },
+			date: {
+				dow: 0,
+			},
+		};
+	} );
+
+	function setToFrancais() {
+		setSettings( {
+			l10n: {
+				locale: 'fr_FR',
+				months: [
+					'janvier',
+					'f\u00e9vrier',
+					'mars',
+					'avril',
+					'mai',
+					'juin',
+					'juillet',
+					'ao\u00fbt',
+					'septembre',
+					'octobre',
+					'novembre',
+					'd\u00e9cembre',
+				],
+				monthsShort: [
+					'Jan',
+					'F\u00e9v',
+					'Mar',
+					'Avr',
+					'Mai',
+					'Juin',
+					'Juil',
+					'Ao\u00fbt',
+					'Sep',
+					'Oct',
+					'Nov',
+					'D\u00e9c',
+				],
+				weekdays: [ 'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi' ],
+				weekdaysShort: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
+				meridiem: { am: ' ', pm: ' ', AM: ' ', PM: ' ' },
+				relative: { future: '%s \u00e0 partir de maintenant', past: 'Il y a %s' },
+			},
+			formats: { time: 'g:i a', date: 'F j, Y', datetime: 'j F Y G \\h i \\m\\i\\n' },
+			timezone: { offset: '0', string: '' },
+		} );
+	}
+
+	it( 'should leave default momentjs data unchanged for english languages', () => {
+		loadLocaleData();
+		expect( moment.locale() ).toBe( 'en' );
+	} );
+
+	it( "should load french data on user locale 'fr-FR'", () => {
+		setToFrancais();
+		loadLocaleData();
+		expect( moment.months()[ 0 ] ).toBe( 'janvier' );
+	} );
+
+	it( "should load translated longDateFormats on user locale 'fr-FR'", () => {
+		setToFrancais();
+		loadLocaleData();
+		expect( moment.localeData()._longDateFormat.LL ).not.toBe( 'F j, Y' );
+	} );
+
+	it( "should load start of week on user locale 'fr-FR'", () => {
+		setToFrancais();
+		wcSettings.date.dow = 5;
+		loadLocaleData();
+		expect( moment.localeData()._week.dow ).toBe( 5 );
+	} );
+} );

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

@@ -41,8 +41,11 @@ function woo_dash_register_script() {
 	$settings = array(
 		'adminUrl'           => admin_url(),
 		'embedBreadcrumbs'   => woo_dash_get_embed_breadcrumbs(),
-		'locale'   => esc_attr( get_bloginfo( 'language' ) ),
+		'siteLocale'   => esc_attr( get_bloginfo( 'language' ) ),
 		'currency'  => woo_dash_currency_settings(),
+		'date' => array(
+			'dow' => get_option( 'start_of_week', 0 ),
+		),
 	);
 
 	wp_add_inline_script(

plugins/woocommerce-admin/tests/js/setup-globals.js

@@ -37,6 +37,9 @@ global.wcSettings = {
 	adminUrl: 'https://vagrant.local/wp/wp-admin/',
 	locale: 'en-US',
 	currency: { code: 'USD', precision: 2, symbol: '$' },
+	date: {
+		dow: 0,
+	},
 };
 
 Object.defineProperty( global.wp, 'date', {