fix: Set moment locale according to chosen language (#5414)

Author: iamareebjamal

app/services/l10n.js

@@ -2,6 +2,8 @@ import classic from 'ember-classic-decorator';
 import { inject as service } from '@ember/service';
 import computed from 'ember-computed';
 import L10n from 'ember-l10n/services/l10n';
+import moment from 'moment';
+import { getScript } from 'open-event-frontend/utils/loader';
 
 @classic
 export default class L10nService extends L10n {
@@ -38,7 +40,7 @@ export default class L10nService extends L10n {
 
   switchLanguage(locale) {
     this.setLocale(locale);
-    this.cookies.write(this.localStorageKey, locale);
+    this.cookies.write(this.localStorageKey, locale, { path: '/' });
     if (!this.fastboot.isFastBoot) {
       location.reload();
     }
@@ -48,12 +50,20 @@ export default class L10nService extends L10n {
     super.init(...arguments);
     const currentLocale = this.cookies.read(this.localStorageKey);
     const detectedLocale = this.detectLocale();
+
+    let locale = 'en';
     if (currentLocale) {
-      this.setLocale(currentLocale);
+      locale = currentLocale;
     } else if (detectedLocale) {
-      this.setLocale(detectedLocale);
-    } else {
-      this.setLocale('en');
+      locale = detectedLocale;
+    }
+
+    this.setLocale(locale);
+    if (locale !== 'en') {
+      getScript(`/assets/moment-locales/${currentLocale}.js`)
+        .then(() => {
+          moment.locale(currentLocale);
+        });
     }
   }
 }

app/utils/loader.ts

@@ -0,0 +1,19 @@
+export const getScript = (url: string): Promise<void> => new Promise((resolve, reject) => {
+  const script = document.createElement('script');
+  script.src = url;
+  script.async = true;
+
+  script.onerror = reject;
+
+  script.onload = (script as any).onreadystatechange = function() {
+    const loadState = this.readyState;
+
+    if (loadState && loadState !== 'loaded' && loadState !== 'complete') {return}
+
+    script.onload = (script as any).onreadystatechange = null;
+
+    resolve();
+  };
+
+  document.head.appendChild(script);
+});

config/environment.js

@@ -34,9 +34,8 @@ module.exports = function(environment) {
     },
 
     moment: {
-      includeTimezone: 'subset'
-      /* ,
-           localeOutputPath : 'assets/moment-locales'*/
+      includeTimezone  : 'subset',
+      localeOutputPath : 'assets/moment-locales'
     },
 
     pace: {

ember-cli-build.js

@@ -45,7 +45,7 @@ module.exports = function(defaults) {
     fingerprint: {
       enabled          : env === 'production',
       generateAssetMap : true,
-      exclude          : ['package.json'],
+      exclude          : ['package.json', 'assets/moment-locales'],
       extensions       : ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'json']
     },
     sourcemaps: {