Implemented: centralized user profile component and image component on settings page (#169)

src/components/Image.vue

@@ -0,0 +1,56 @@
+<template>
+  <img :src="imageUrl"/>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { imageContext as context } from "../index";
+import { useUserStore } from '../store/user'
+
+const userStore = useUserStore();
+
+const props = defineProps(['src']);
+let imageUrl = ref(context.defaultImgUrl);
+const resourceUrl = computed(() => userStore.getAppResourceUrl).value || "";
+
+const setImageUrl = () => {
+  if (props.src) {
+    if (props.src.indexOf('assets/') != -1) {
+      // Assign directly in case of assets
+      imageUrl.value = props.src;
+    } else if (props.src.startsWith('http')) {
+      // If starts with http, it is web url check for existence and assign
+      checkIfImageExists(props.src).then(() => {
+        imageUrl.value = props.src;
+      }).catch(() => {
+        console.error("Image doesn't exist");
+      })
+    } else {
+      // Image is from resource server, hence append to base resource url, check for existence and assign
+      const newImageUrl = resourceUrl.concat(props.src)
+      checkIfImageExists(imageUrl).then(() => {
+        imageUrl.value = newImageUrl;
+      }).catch(() => {
+        console.error("Image doesn't exist");
+      })
+    }
+  }
+}
+
+const checkIfImageExists = (src: string) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => reject(false);
+    img.src = src;
+  })
+}
+
+onMounted(() => {
+  setImageUrl();
+})
+
+onUpdated(() => {
+  setImageUrl();
+});
+</script>

src/components/UserProfileInfo.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="user-profile">
+    <ion-card>
+      <ion-item lines="full">
+        <ion-avatar slot="start" v-if="userProfile?.partyImageUrl">
+          <Image :src="userProfile.partyImageUrl"/>
+        </ion-avatar>
+        <!-- ion-no-padding to remove extra side/horizontal padding as additional padding 
+        is added on sides from ion-item and ion-padding-vertical to compensate the removed
+        vertical padding -->
+        <ion-card-header class="ion-no-padding ion-padding-vertical">
+          <ion-card-subtitle>{{ userProfile.userLoginId }}</ion-card-subtitle>
+          <ion-card-title>{{ userProfile.partyName }}</ion-card-title>
+        </ion-card-header>
+      </ion-item>
+      <ion-button color="danger" @click="logout()">{{ $t("Logout") }}</ion-button>
+      <ion-button fill="outline" @click="goToLaunchpad()">
+        {{ $t("Go to Launchpad") }}
+        <ion-icon slot="end" :icon="openOutline" />
+      </ion-button>
+      <!-- Commenting this code as we currently do not have reset password functionality -->
+      <!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
+    </ion-card>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  IonAvatar,
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonIcon,
+  IonItem
+} from '@ionic/vue';
+import Image from './Image.vue';
+import { openOutline } from 'ionicons/icons';
+import { computed } from 'vue';
+import { appContext } from '../index';
+import { useUserStore } from '../store/user'
+
+const userStore = useUserStore();
+const appState = appContext.config.globalProperties.$store;
+
+const emit = defineEmits(['reset-state-before-logout'])
+const userProfile = computed(() => appState.getters['user/getUserProfile']);
+const appLoginUrl = computed(() => userStore.getAppLoginUrl).value;
+
+const logout = () => {
+  // Emit to handle actions and resets performed by apps before logout.
+  emit('reset-state-before-logout')
+
+  appState.dispatch('user/logout').then(() => {
+    const redirectUrl = window.location.origin + '/login'
+    window.location.href = `${appLoginUrl}?isLoggedOut=true&redirectUrl=${redirectUrl}`
+  })
+}
+
+const goToLaunchpad = () => {
+  window.location.href = appLoginUrl;
+}
+</script>

src/components/index.ts

@@ -18,3 +18,4 @@ export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
 export { default as ShopifyImg } from './ShopifyImg.vue';
+export { default as UserProfileInfo } from './UserProfileInfo.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 { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
+import { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg, UserProfileInfo } from "./components";
 import Login from "./components/Login";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -17,6 +17,7 @@ const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate)
 
 let i18n: any
+let imageContext = {} as any
 let translate: any;
 let loginContext = {} as any
 let shopifyImgContext = {} as any
@@ -46,12 +47,14 @@ export let dxpComponents = {
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
     app.component('ShopifyImg', ShopifyImg)
+    app.component('UserProfileInfo', UserProfileInfo)
 
     loginContext.login = options.login
     loginContext.logout = options.logout
     loginContext.loader = options.loader
     loginContext.appLoginUrl = options.appLoginUrl
 
+    imageContext.defaultImgUrl = options.defaultImgUrl
     shopifyImgContext.defaultImgUrl = options.defaultImgUrl
     productIdentificationContext.getProductIdentificationPref = options.getProductIdentificationPref
     productIdentificationContext.setProductIdentificationPref = options.setProductIdentificationPref
@@ -74,6 +77,7 @@ export {
   appContext,
   goToOms,
   i18n,
+  imageContext,
   initialiseFirebaseApp,
   Login,
   loginContext,
@@ -86,5 +90,6 @@ export {
   translate,
   useAuthStore,
   useProductIdentificationStore,
+  UserProfileInfo,
   useUserStore
 }

src/store/user.ts

@@ -6,11 +6,15 @@ declare let process: any;
 export const useUserStore = defineStore('user', {
   state: () => {
     return {
+      appLoginUrl: process.env.VUE_APP_LOGIN_URL,
+      appResourceUrl: process.env.VUE_APP_RESOURCE_URL,
       locale: '',
       localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" }
     }
   },
   getters: {
+    getAppLoginUrl: (state) => state.appLoginUrl,
+    getAppResourceUrl: (state) => state.appResourceUrl,
     getLocale: (state) => state.locale,
     getLocaleOptions: (state) => state.localeOptions
   },