Merge pull request #206 from k2maan/dxp-components/#196

Implemented: locale update through user profile (#196)
hotwax · Oct 12, 2023 · d984c85 · d984c85
2 parents 1023843 + bb5a359
commit d984c85
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 25 deletions.
diff --git a/src/components/LanguageSwitcher.vue b/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>
diff --git a/src/components/Login.ts b/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) {

diff --git a/src/index.ts b/src/index.ts
@@ -34,8 +34,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
     })
 
@@ -62,8 +62,7 @@ export let dxpComponents = {
     imageContext.defaultImgUrl = options.defaultImgUrl
     shopifyImgContext.defaultImgUrl = options.defaultImgUrl
 
-    userContext.getUserPreference = options.getUserPreference
-    userContext.setUserPreference = options.setUserPreference
+    userContext.setUserLocale = options.setUserLocale
 
     productIdentificationContext.getProductIdentificationPref = options.getProductIdentificationPref
     productIdentificationContext.setProductIdentificationPref = options.setProductIdentificationPref

diff --git a/src/store/user.ts b/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)
       }