Implemented: support to show timeZone of browser and user, renamed co…

…mponent to have prefix Dxp and handled case of undefined for setUserLocale method

src/components/MenuFooterNavigation.vue → src/components/DxpMenuFooterNavigation.vue

@@ -5,7 +5,7 @@
         <ion-label class="ion-text-wrap">
           <p class="overline">{{ instanceUrl }}</p>
         </ion-label>
-        <ion-note slot="end">{{ userAppState.userProfile?.userTimeZone }}</ion-note>
+        <ion-note :color="browserTimeZone === userAppState.userProfile?.userTimeZone ? '' : 'danger'" slot="end">{{ userAppState.userProfile?.userTimeZone }}</ion-note>
       </ion-item>
       <!-- showing product stores only when there are multiple options to choose from. -->
       <ion-item v-if="userAppState.userProfile?.stores?.length > 2" lines="none">
@@ -50,4 +50,7 @@ const userAppState = computed(() => ({
   shopifyConfigs: appState.getters['user/getShopifyConfigs'],
   currentShopifyConfig: appState.getters['user/getCurrentShopifyConfig']
 }));
+
+// Accessing browser timeZone to check for timeZone diff of the app and browser
+const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 </script>

src/components/index.ts

@@ -18,7 +18,7 @@ export { default as DxpImage } from './DxpImage.vue';
 export { default as DxpUserProfile } from './DxpUserProfile.vue'
 export { default as AppVersionInfo } from './AppVersionInfo.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
-export { default as MenuFooterNavigation } from './MenuFooterNavigation.vue';
+export { default as DxpMenuFooterNavigation } from './DxpMenuFooterNavigation.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
 export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as Scanner } from './Scanner.vue';

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, MenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, DxpMenuFooterNavigation, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -48,7 +48,7 @@ export let dxpComponents = {
     app.component('DxpUserProfile', DxpUserProfile)
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
-    app.component('MenuFooterNavigation', MenuFooterNavigation)
+    app.component('DxpMenuFooterNavigation', DxpMenuFooterNavigation)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
     app.component('Scanner', Scanner)
@@ -86,6 +86,7 @@ export {
   appContext,
   DxpImage,
   DxpUserProfile,
+  DxpMenuFooterNavigation,
   getProductIdentificationValue,
   goToOms,
   i18n,

src/store/user.ts

@@ -26,7 +26,8 @@ export const useUserStore = defineStore('user', {
           matchingLocale = matchingLocale || Object.keys(this.localeOptions).find((option: string) => option.slice(0, 2) === locale.slice(0, 2))
           newLocale = matchingLocale || this.locale
           // update locale in state and globally
-          await userContext.setUserLocale({ newLocale })
+          console.log('setting up locale for user', userContext.setUserLocale)
+          if(userContext.setUserLocale) await userContext.setUserLocale({ newLocale })
         }
       } catch (error) {
         console.error(error)