Implemented: locale update through user profile (#196)

src/components/LanguageSwitcher.vue

@@ -27,7 +27,7 @@ const userStore = useUserStore();
 const locales = computed(() => userStore.getLocaleOptions);
 const currentLocale = computed(() => userStore.getLocale);
 
-const setLocale = (locale: any) => {
+const setLocale = (locale: string) => {
   userStore.setLocale(locale)
 }
 </script>

src/components/Login.ts

@@ -67,7 +67,7 @@ export default defineComponent({
         const userStore = useUserStore()
         // to access baseUrl as we store only OMS in DXP
         const appState = appContext.config.globalProperties.$store
-        await userStore.getPreference(token, appState.getters['user/getBaseUrl'])
+        await userStore.setLocale(appState.getters['user/getUserProfile'].userLocale)
 
         // check if firebase configurations are there
         if (notificationContext.appFirebaseConfig) {

src/index.ts

@@ -33,8 +33,8 @@ export let dxpComponents = {
     // Creating an instance of the i18n and translate function for translating text
     i18n = createI18n({
       legacy: false,
-      locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+      locale: process.env.VUE_APP_I18N_LOCALE || 'en-US',
+      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en-US',
       messages: options.localeMessages
     })
 
@@ -57,8 +57,7 @@ export let dxpComponents = {
 
     shopifyImgContext.defaultImgUrl = options.defaultImgUrl
 
-    userContext.getUserPreference = options.getUserPreference
-    userContext.setUserPreference = options.setUserPreference
+    userContext.setUserLocale = options.setUserLocale
 
     productIdentificationContext.getProductIdentificationPref = options.getProductIdentificationPref
     productIdentificationContext.setProductIdentificationPref = options.setProductIdentificationPref

src/store/user.ts

@@ -6,32 +6,26 @@ declare let process: any;
 export const useUserStore = defineStore('user', {
   state: () => {
     return {
-      localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" },
-      preference: {
-        locale: 'en'
-      } as any
+      localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en-US": "English" },
+      locale: 'en-US'
     }
   },
   getters: {
-    getLocale: (state) => state.preference.locale,
+    getLocale: (state) => state.locale,
     getLocaleOptions: (state) => state.localeOptions
   },
   actions: {
-    setLocale(payload: string) {
-      // update locale in state and globally
-      i18n.global.locale.value = payload
-      this.setPreference({ locale: payload })
-    },
-    async setPreference(payload: any) {
-      this.preference = { ...this.preference, ...payload }
-      await userContext.setUserPreference({
-        'userPrefTypeId': 'LOCALE_PREFERENCE',
-        'userPrefValue': JSON.stringify(this.preference)
-      })
-    },
-    async getPreference(token: any, baseURL: string) {
+    async setLocale(locale: string) {
+      let matchingLocale = Object.keys(this.localeOptions).find((option: string) => option === locale)
+      // If exact locale is not found, try to match the first two characters i.e primary code
+      matchingLocale = matchingLocale || Object.keys(this.localeOptions).find((option: string) => option.slice(0, 2) === locale.slice(0, 2))
+      const newLocale = matchingLocale || this.locale
+
       try {
-        this.preference = await userContext.getUserPreference(token, baseURL, 'LOCALE_PREFERENCE')
+        // update locale in state and globally
+        i18n.global.locale.value = newLocale
+        this.locale = newLocale
+        await userContext.setUserLocale({ newLocale })
       } catch (error) {
         console.error(error)
       }