From 00530378f1719c8cefc7efc65ffc66d55880f70b Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 13 Aug 2024 15:55:41 +0530
Subject: [PATCH] Improved: added empty state in case of no jobs and no store
 pickup groups, and fixed issue in group fetching (#354)

---
 src/locales/en.json                  |   1 +
 src/store/modules/channel/actions.ts |   1 +
 src/views/InventoryChannels.vue      | 100 ++++++++++++++-------------
 src/views/StorePickup.vue            |  14 ++--
 4 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index ef51488c..0909f99e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -153,6 +153,7 @@
   "No sequence has been changed.": "No sequence has been changed.",
   "No safety stock rule found.": "No safety stock rule found.",
   "No shipping rule found.": "No shipping rule found.",
+  "No store pickup group found linked with current product store.": "No store pickup group found linked with current product store.",
   "No store pickup rule found.": "No store pickup rule found.",
   "No threshold rule found. Invalid job": "No threshold rule found. Invalid job",
   "No threshold rule found.": "No threshold rule found.",
diff --git a/src/store/modules/channel/actions.ts b/src/store/modules/channel/actions.ts
index 9dd226d8..708e8769 100644
--- a/src/store/modules/channel/actions.ts
+++ b/src/store/modules/channel/actions.ts
@@ -91,6 +91,7 @@ const actions: ActionTree<ChannelState, RootState> = {
     const shopifyConfigs = await dispatch("fetchShopifyConfigs");
 
     if(!shopifyConfigs.length) {
+      commit(types.CHANNEL_JOBS_UPDATED, [])
       return;
     }
 
diff --git a/src/views/InventoryChannels.vue b/src/views/InventoryChannels.vue
index ad958578..fc62ea66 100644
--- a/src/views/InventoryChannels.vue
+++ b/src/views/InventoryChannels.vue
@@ -76,56 +76,62 @@
         </section>
  
         <section v-else-if="selectedSegment === 'publish'">
-          <ion-card v-for="job in shopifyJobs" :key="job.shopId">
-            <ion-card-header>
-              <div>
-                <ion-card-subtitle class="overline">{{ job.shopifyConfigId }}</ion-card-subtitle>
-                <ion-card-title>{{ job.name ? job.name : job.shopifyConfigId }}</ion-card-title>
-              </div>
-              <ion-badge v-if="job.statusId === 'SERVICE_PENDING'" color="dark">{{ translate("running") }} {{ timeFromNow(job.runTime) }}</ion-badge>
-            </ion-card-header>
-
-            <ion-list>
-              <ion-item lines="full">
-                <ion-icon slot="start" :icon="timeOutline"/>
-                <ion-select :label="translate('Run time')" :placeholder="translate('Select')" interface="popover" :value="job.runTimeValue" @ionChange="updateRunTime($event, job)">
-                  <ion-select-option v-for="runTime in jobRuntimeOptions" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
-                </ion-select>
-
-                <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
-                  <ion-content :force-overscroll="false">
-                    <ion-datetime          
-                      show-default-buttons
-                      hour-cycle="h23"
-                      :value="job.runTimeValue ? (isCustomRunTime(job.runTimeValue) ? getDateTime(job.runTimeValue) : getDateTime(DateTime.now().toMillis() + job.runTimeValue)) : getNowTimestamp()"
-                      @ionChange="updateCustomTime($event, job)"
-                    />
-                  </ion-content>
-                </ion-modal>
-              </ion-item>
+          <template v-if="shopifyJobs.length">
+            <ion-card v-for="job in shopifyJobs" :key="job.shopId">
+              <ion-card-header>
+                <div>
+                  <ion-card-subtitle class="overline">{{ job.shopifyConfigId }}</ion-card-subtitle>
+                  <ion-card-title>{{ job.name ? job.name : job.shopifyConfigId }}</ion-card-title>
+                </div>
+                <ion-badge v-if="job.statusId === 'SERVICE_PENDING'" color="dark">{{ translate("running") }} {{ timeFromNow(job.runTime) }}</ion-badge>
+              </ion-card-header>
 
-              <ion-item lines="full">
-                <ion-icon slot="start" :icon="timerOutline"/>
-                <ion-select :label="translate('Frequency')" :value="getJobStatus(job)" :placeholder="translate('Select')" interface="popover" @ionDismiss="updateFrequency($event, job)">
-                  <ion-select-option v-for="freq in jobFrequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
-                </ion-select>
-              </ion-item>
+              <ion-list>
+                <ion-item lines="full">
+                  <ion-icon slot="start" :icon="timeOutline"/>
+                  <ion-select :label="translate('Run time')" :placeholder="translate('Select')" interface="popover" :value="job.runTimeValue" @ionChange="updateRunTime($event, job)">
+                    <ion-select-option v-for="runTime in jobRuntimeOptions" :key="runTime.value" :value="runTime.value">{{ runTime.label }}</ion-select-option>
+                  </ion-select>
+
+                  <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
+                    <ion-content :force-overscroll="false">
+                      <ion-datetime          
+                        show-default-buttons
+                        hour-cycle="h23"
+                        :value="job.runTimeValue ? (isCustomRunTime(job.runTimeValue) ? getDateTime(job.runTimeValue) : getDateTime(DateTime.now().toMillis() + job.runTimeValue)) : getNowTimestamp()"
+                        @ionChange="updateCustomTime($event, job)"
+                      />
+                    </ion-content>
+                  </ion-modal>
+                </ion-item>
 
-              <ion-item lines="full">
-                <ion-icon slot="start" :icon="albumsOutline"/>
-                <ion-select :label="translate('Inventory group')" v-model="job.runtimeData.facilityGroupId" :disabled="job.statusId === 'SERVICE_PENDING'" :placeholder="translate('Select')" interface="popover">
-                  <ion-select-option v-for="channel in inventoryChannels" :key="channel.facilityGroupId" :value="channel.facilityGroupId">{{ channel.facilityGroupName ? channel.facilityGroupName : channel.facilityGroupId }}</ion-select-option>
-                </ion-select>
-              </ion-item>
+                <ion-item lines="full">
+                  <ion-icon slot="start" :icon="timerOutline"/>
+                  <ion-select :label="translate('Frequency')" :value="getJobStatus(job)" :placeholder="translate('Select')" interface="popover" @ionDismiss="updateFrequency($event, job)">
+                    <ion-select-option v-for="freq in jobFrequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
+                  </ion-select>
+                </ion-item>
 
-              <div class="actions">
-                <ion-button fill="clear" @click="saveChanges(job)">{{ translate("Save changes") }}</ion-button>
-                <ion-button color="medium" fill="clear" slot="end" @click="openShopActionsPopover($event, job)">
-                  <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
-                </ion-button>
-              </div>
-            </ion-list>
-          </ion-card>
+                <ion-item lines="full">
+                  <ion-icon slot="start" :icon="albumsOutline"/>
+                  <ion-select :label="translate('Inventory group')" v-model="job.runtimeData.facilityGroupId" :disabled="job.statusId === 'SERVICE_PENDING'" :placeholder="translate('Select')" interface="popover">
+                    <ion-select-option v-for="channel in inventoryChannels" :key="channel.facilityGroupId" :value="channel.facilityGroupId">{{ channel.facilityGroupName ? channel.facilityGroupName : channel.facilityGroupId }}</ion-select-option>
+                  </ion-select>
+                </ion-item>
+
+                <div class="actions">
+                  <ion-button fill="clear" @click="saveChanges(job)">{{ translate("Save changes") }}</ion-button>
+                  <ion-button color="medium" fill="clear" slot="end" @click="openShopActionsPopover($event, job)">
+                    <ion-icon :icon="ellipsisVerticalOutline" slot="icon-only"/>
+                  </ion-button>
+                </div>
+              </ion-list>
+            </ion-card>
+          </template>
+
+          <div class="empty-state" v-else>
+            <p>{{ translate("No job found.") }}</p>
+          </div>
         </section>
       </main>
     </ion-content>
diff --git a/src/views/StorePickup.vue b/src/views/StorePickup.vue
index 0d921546..89da5497 100644
--- a/src/views/StorePickup.vue
+++ b/src/views/StorePickup.vue
@@ -35,7 +35,10 @@
         </div>
       </main>
       <main v-else>
-        <section v-if="facilities.length">
+        <div v-if="!pickupGroups.length" class="empty-state">
+          <p>{{ translate("No store pickup group found linked with current product store.") }}</p>
+        </div>
+        <section v-else-if="facilities.length">
           <FacilityItem v-for="facility in facilities" :facility="facility" :key="facility.facilityId" />
         </section>
         <div v-else class="empty-state">
@@ -90,6 +93,7 @@ const isScrollable = computed(() => store.getters["util/isFacilitiesScrollable"]
 const facilities = computed(() => store.getters["util/getFacilities"]);
 const selectedSegment = computed(() => store.getters["util/getSelectedSegment"]);
 const isReorderActive = computed(() => store.getters["rule/isReorderActive"]);
+const pickupGroups = computed(() => store.getters["util/getPickupGroups"]);
 
 const reorderingRules = ref([]);
 const isScrollingEnabled = ref(false);
@@ -109,12 +113,12 @@ onIonViewDidLeave(() => {
 async function fetchRules() {
   emitter.emit("presentLoader");
   store.dispatch("rule/updateIsReorderActive", false)
-  if(!selectedSegment.value || (selectedSegment.value !== 'RG_PICKUP_FACILITY' && selectedSegment.value !== 'RG_PICKUP_CHANNEL' && selectedSegment.value !== 'PICKUP_FACILITY')) store.dispatch("util/updateSelectedSegment", "RG_PICKUP_FACILITY");
+  if(!selectedSegment.value || (selectedSegment.value !== 'RG_PICKUP_FACILITY' && selectedSegment.value !== 'RG_PICKUP_CHANNEL' && selectedSegment.value !== 'PICKUP_FACILITY')) await store.dispatch("util/updateSelectedSegment", "RG_PICKUP_FACILITY");
   if(selectedSegment.value === 'PICKUP_FACILITY') {
-    await fetchFacilities();
-    store.dispatch("util/fetchPickupGroups")
+    await Promise.allSettled([fetchFacilities(), store.dispatch("util/fetchPickupGroups")]) ;
+  } else {
+    await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
   }
-  await Promise.allSettled([store.dispatch('rule/fetchRules', { groupTypeEnumId: selectedSegment.value, pageSize: 50 }), store.dispatch("util/fetchConfigFacilities"), store.dispatch("util/fetchFacilityGroups")])
   emitter.emit("dismissLoader");
 }