Improved Menu footer by providing option to change shopifyConfig. (#85zrgqc2a)

src/components/Menu.vue

@@ -34,14 +34,28 @@
           </ion-label>
           <ion-note slot="end">{{ userProfile?.userTimeZone }}</ion-note>
         </ion-item>
-        <ion-item lines="none">
+        <!-- showing product stores only when there are multiple options to choose from. -->
+        <ion-item v-if="userProfile?.stores?.length > 2" lines="none">
           <ion-select interface="popover" :value="eComStore.productStoreId" @ionChange="setEComStore($event)">
             <ion-select-option v-for="store in (userProfile?.stores ? userProfile.stores : [])" :key="store.productStoreId" :value="store.productStoreId" >{{ store.storeName }}</ion-select-option>
           </ion-select>
         </ion-item>
-        <ion-item lines="none">
+        <ion-item v-else lines="none">
           <ion-label class="ion-text-wrap">
-            <p>{{ currentShopifyConfig.name ? currentShopifyConfig.name : currentShopifyConfig.shopifyConfigName }}</p>
+            {{ currentEComStore.storeName }}
+          </ion-label>
+        </ion-item>
+        <!-- similarly, showing shopify configs only when there are multiple options to choose from 
+        but if both product store and config have multiple options, then only option to choose
+        product store will be visible -->
+        <ion-item v-if="shopifyConfigs.length > 1 && userProfile?.stores.length < 3" lines="none">
+          <ion-select interface="popover" :value="currentShopifyConfig?.shopifyConfigId" @ionChange="setShopifyConfig($event)">
+            <ion-select-option v-for="shopifyConfig in shopifyConfigs" :key="shopifyConfig.shopifyConfigId" :value="shopifyConfig.shopifyConfigId" >{{ shopifyConfig.name ? shopifyConfig.name : shopifyConfig.shopifyConfigName }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item v-else lines="none">
+          <ion-label class="ion-text-wrap">
+           <p>{{ currentShopifyConfig.name ? currentShopifyConfig.name : currentShopifyConfig.shopifyConfigName }}</p> 
           </ion-label>
         </ion-item>
       </ion-toolbar>
@@ -104,15 +118,19 @@ export default defineComponent({
       eComStore: 'user/getCurrentEComStore',
       instanceUrl: 'user/getInstanceUrl',
       userProfile: 'user/getUserProfile',
-      currentShopifyConfig: 'user/getCurrentShopifyConfig'
+      currentShopifyConfig: 'user/getCurrentShopifyConfig',
+      currentEComStore: 'user/getCurrentEComStore',
+      shopifyConfigs: 'user/getShopifyConfigs',
     })
   },
   methods: {
     async setEComStore(event: CustomEvent) {
-      if(this.userProfile) {
-        await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value })
-        emitter.emit("productStoreChanged")
-      }
+      await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value })
+      emitter.emit("productStoreOrConfigChanged")
+    },
+    async setShopifyConfig(event: CustomEvent){
+      await this.store.dispatch('user/setCurrentShopifyConfig', { 'shopifyConfigId': event.detail.value });
+      emitter.emit("productStoreOrConfigChanged")
     },
   },
   watch:{

src/views/InitialLoad.vue

@@ -117,10 +117,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchJobs();
-    emitter.on("productStoreChanged", this.fetchJobs);
+    emitter.on("productStoreOrConfigChanged", this.fetchJobs);
   },
   unmounted() {
-    emitter.off("productStoreChanged", this.fetchJobs);
+    emitter.off("productStoreOrConfigChanged", this.fetchJobs);
   },
   computed: {
     ...mapGetters({

src/views/Inventory.vue

@@ -182,11 +182,11 @@ export default defineComponent({
   },
   mounted () {
     this.fetchJobs();
-    emitter.on("productStoreChanged", this.fetchJobs);
+    emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
   },
   unmounted() {
-    emitter.off("productStoreChanged", this.fetchJobs);
+    emitter.off("productStoreOrConfigChanged", this.fetchJobs);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
   setup() {

src/views/Orders.vue

@@ -497,11 +497,11 @@ export default defineComponent({
   },
   mounted () {
     this.fetchJobs();
-    emitter.on("productStoreChanged", this.fetchJobs);
+    emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
   },
   unmounted() {
-    emitter.off("productStoreChanged", this.fetchJobs);
+    emitter.off("productStoreOrConfigChanged", this.fetchJobs);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
   setup() {

src/views/Pipeline.vue

@@ -589,11 +589,11 @@ export default defineComponent({
     await this.store.dispatch('job/updateCurrentJob', { job: {} });
   },
   mounted(){
-    emitter.on("productStoreChanged", this.refreshJobs);
+    emitter.on("productStoreOrConfigChanged", this.refreshJobs);
     emitter.on("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },
   unmounted(){
-    emitter.off("productStoreChanged", this.refreshJobs);
+    emitter.off("productStoreOrConfigChanged", this.refreshJobs);
     emitter.off('jobUpdated', this.updateJobs);
     emitter.off("pinnedJobsUpdated", (this as any).updateSelectedPinnedJob);
   },

src/views/PreOrder.vue

@@ -322,12 +322,12 @@ export default defineComponent({
   },
   mounted () {
     this.fetchJobs();
-    emitter.on("productStoreChanged", this.fetchJobs);
+    emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
   },
   unmounted() {
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
-    emitter.off("productStoreChanged", this.fetchJobs);
+    emitter.off("productStoreOrConfigChanged", this.fetchJobs);
   },
   setup() {
     const store = useStore();

src/views/Product.vue

@@ -128,12 +128,12 @@ export default defineComponent({
   },
   mounted () {
     this.fetchJobs();
-    emitter.on("productStoreChanged", this.fetchJobs);
+    emitter.on("productStoreOrConfigChanged", this.fetchJobs);
     this.store.dispatch('webhook/fetchWebhooks')
     emitter.on('viewJobConfiguration', this.viewJobConfiguration)
   },
   unmounted() {
-    emitter.off("productStoreChanged", this.fetchJobs);
+    emitter.off("productStoreOrConfigChanged", this.fetchJobs);
     emitter.off('viewJobConfiguration', this.viewJobConfiguration)
   },
   methods: {