diff --git a/plugins/woocommerce-admin/client/components/calendar/index.js b/plugins/woocommerce-admin/client/components/calendar/index.js index d07ecb948c4..7c0cbe0f86e 100644 --- a/plugins/woocommerce-admin/client/components/calendar/index.js +++ b/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 ) } /> diff --git a/plugins/woocommerce-admin/client/lib/currency/index.js b/plugins/woocommerce-admin/client/lib/currency/index.js index f4e28b10dd8..6d5763984d1 100644 --- a/plugins/woocommerce-admin/client/lib/currency/index.js +++ b/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 ) { diff --git a/plugins/woocommerce-admin/client/lib/date/index.js b/plugins/woocommerce-admin/client/lib/date/index.js index e29b84b53dd..a4f0130efa7 100644 --- a/plugins/woocommerce-admin/client/lib/date/index.js +++ b/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(); diff --git a/plugins/woocommerce-admin/client/lib/date/test/index.js b/plugins/woocommerce-admin/client/lib/date/test/index.js index bc6bff8b914..32ef556e760 100644 --- a/plugins/woocommerce-admin/client/lib/date/test/index.js +++ b/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 ); + } ); +} ); diff --git a/plugins/woocommerce-admin/lib/client-assets.php b/plugins/woocommerce-admin/lib/client-assets.php index 255b2d50e02..c83003e973e 100644 --- a/plugins/woocommerce-admin/lib/client-assets.php +++ b/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( diff --git a/plugins/woocommerce-admin/tests/js/setup-globals.js b/plugins/woocommerce-admin/tests/js/setup-globals.js index 09ebd154210..f84ab72c3fe 100644 --- a/plugins/woocommerce-admin/tests/js/setup-globals.js +++ b/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', {