Merge pull request #37 from ymaheshwari1/#36

Improved: ui by adding back button, loading the stores on opening pickup modal and dispalying all the stores irrespective of the inventory available(#36)

Author: ravilodhi

src/locales/en.json

@@ -12,13 +12,15 @@
   "Delivery method": "Delivery method",
   "Enter keyword to search stores": "Enter keyword to search stores",
   "Enter zip code to search stores nearby": "Enter zip code to search stores nearby",
-  "Fetching stores.": "Fetching stores.",
+  "Fetching stores": "Fetching stores",
   "Install": "Install",
   "in stock": "in stock",
   "Login": "Login",
   "Logout": "Logout",
   "mi": "mi",
   "Nearby stores": "Nearby stores",
+  "No customer": "No customer",
+  "No inventory": "No inventory",
   "No shipping estimates": "No shipping estimates",
   "No stores found. Please search another store.": "No stores found. Please search another store.",
   "No stores found. Please search another zip code.": "No stores found. Please search another zip code.",

src/theme/variables.css

@@ -235,6 +235,23 @@ http://ionicframework.com/docs/theming/ */
   }
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center;
+}
+
 @media (prefers-color-scheme: dark) {
   ion-chip > ion-icon {
     color: var(--ion-color-dark);

src/views/OrderDetail.vue

@@ -2,6 +2,7 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-back-button default-href="/" slot="start" @click="back($event)" />
         <ion-title>{{ $t("Order Details") }}</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -11,11 +12,14 @@
         <ion-card>
           <ion-list>
             <ion-item lines="none">
-              <ion-label>
-                <h2>{{ order.customer?.first_name }} {{ order.customer?.last_name }}</h2>
+              <ion-label v-if="order.customer">
+                <h2>{{ order.customer.first_name }} {{ order.customer.last_name }}</h2>
                 <!-- TODO: Uncomment this when we'll get CRS information -->
                 <!-- <p>CSR name</p> -->
               </ion-label>
+              <ion-label v-else>
+                <h2>{{ $t("No customer") }}</h2>
+              </ion-label>
               <ion-note slot="end">{{ timeFromNow(order?.created_at) }}</ion-note>
             </ion-item>
           </ion-list>
@@ -68,6 +72,7 @@
 <script lang="ts">
 import {
   alertController,
+  IonBackButton,
   IonButton,
   IonCard,
   IonContent,
@@ -100,6 +105,7 @@ import { showToast } from "@/utils";
 export default defineComponent({
   name: 'OrderDetail',
   components: {
+    IonBackButton,
     IonButton,
     IonCard,
     IonContent,
@@ -148,6 +154,10 @@ export default defineComponent({
     this.initialOrder = JSON.parse(JSON.stringify(this.order));
   },
   methods: {
+    back(event: any) {
+      event?.preventDefault();
+      history.back()
+    },
     isPreorderOrBackorderProduct(item: any, label: string){
       const product = this.getPreorderItemAvailability(item.sku);  
       return !(product.label === label);

src/views/PickupLocationModal.vue

@@ -13,24 +13,26 @@
     </ion-toolbar>
   </ion-header>
   <ion-content>
-    <div v-if="!queryString.length" class="ion-text-center">
-      <p>{{ searchPriority == 'zipCode' ? $t("Enter zip code to search stores nearby") : $t('Enter keyword to search stores') }}</p>
-    </div>    
+    <div v-if="isloading" class="empty-state">
+      <ion-spinner name="crescent" />
+      <p>{{ $t("Fetching stores") }}</p>
+    </div>
 
     <div v-else-if="!nearbyStores.length" class="ion-text-center">
       <p>{{ searchPriority == 'zipCode' ? $t("No stores found. Please search another zip code.") : $t("No stores found. Please search another store.") }}</p>
     </div>
 
-    <ion-list v-else >
+    <ion-list v-else>
       <ion-list-header v-if="searchPriority == 'zipCode'" lines="full" color="light">
         <ion-label>{{ $t("Nearby stores") }}</ion-label>
       </ion-list-header>
       <ion-radio-group v-model="selectedFacility">
         <ion-item v-for="store of nearbyStores" :key="store.facilityId">
-          <ion-radio :value="store" slot="start" />
+          <ion-radio :disabled="!store.atp" :value="store" slot="start" />
           <ion-label>
-            <h2>{{ store.facilityName }}</h2>
-            <p>{{ store.atp }} {{ $t("in stock") }}</p>
+            <h2>{{ store.facilityName || store.storeName }}</h2>
+            <p v-if="store.atp">{{ store.atp }} {{ $t("in stock") }}</p>
+            <p v-else>{{ $t("No inventory") }}</p>
           </ion-label>
           <ion-label v-if="store.distance" slot="end">{{ store.distance }} {{ $t("mi") }}</ion-label>
         </ion-item>
@@ -57,6 +59,7 @@ import {
   IonRadio,
   IonRadioGroup,
   IonSearchbar,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   loadingController,
@@ -86,6 +89,7 @@ export default defineComponent({
     IonRadio,
     IonRadioGroup,
     IonSearchbar,
+    IonSpinner,
     IonTitle,
     IonToolbar
   },
@@ -96,7 +100,8 @@ export default defineComponent({
       nearbyStores: [] as any,
       selectedFacility: {} as any,
       searchPriority: 'zipCode',
-      filters: process.env.VUE_APP_DEFAULT_STORETYPE
+      filters: process.env.VUE_APP_DEFAULT_STORETYPE,
+      isloading: false
     }
   },
   props: ["item", "facilityId"],
@@ -106,20 +111,43 @@ export default defineComponent({
       shop: 'shop/getShop'
     })
   },
-  mounted() {
+  async mounted() {
+    this.isloading = true
     const shopifyShops = JSON.parse(process.env.VUE_APP_DEFAULT_SHOP_CONFIG)
     const shopConfiguration = shopifyShops[this.shop]
 
     if(shopConfiguration) {
       this.searchPriority = shopConfiguration.search
       this.filters = shopConfiguration.filters
     }
+
+    try {
+      const stores = await this.getStores("")
+      if (!stores?.length) return;
+
+      const facilityIds = stores.map((store: any) => store.storeCode)
+      const storesWithInventory = await this.checkInventory(facilityIds)
+
+      stores.map((storeData: any) => {
+        const inventoryDetails = storesWithInventory.find((store: any) => store.facilityId === storeData.storeCode);
+        // only add stores information in array when having inventory for that store
+        if(inventoryDetails) {
+          this.nearbyStores.push({ ...storeData, ...inventoryDetails, distance: storeData.dist });
+        } else {
+          this.nearbyStores.push({ ...storeData, atp: 0 });
+        }
+      });
+    } catch(err) {
+      console.error(err)
+    } finally {
+      this.isloading = false
+    }
   },
   methods: {
     async presentLoader() {
       this.loader = await loadingController
         .create({
-          message: this.$t("Fetching stores."),
+          message: this.$t("Fetching stores"),
           translucent: true,
         });
       await this.loader.present();
@@ -134,7 +162,7 @@ export default defineComponent({
 
     async getStores(location: string) {
       const payload = {
-        "viewSize": 50,
+        "viewSize": 10,
         "filters": this.filters,
         "keyword": this.queryString
       } as any
@@ -180,7 +208,7 @@ export default defineComponent({
         });
 
         if (hasError(productInventoryResp) || !productInventoryResp.data.count) return [];
-        return productInventoryResp.data.docs.filter((store: any) => store.atp > 0)
+        return productInventoryResp.data.docs;
       } catch (error) {
         console.error(error)
       }
@@ -190,7 +218,7 @@ export default defineComponent({
       this.queryString = event.target.value.trim();
       if(!this.queryString) return 
       this.nearbyStores = [];
-      await this.presentLoader()
+      this.isloading = true;
       try {
         let location = ''
 
@@ -205,19 +233,20 @@ export default defineComponent({
 
         const facilityIds = stores.map((store: any) => store.storeCode)
         const storesWithInventory = await this.checkInventory(facilityIds)
-        if (!storesWithInventory?.length) return;
 
         stores.map((storeData: any) => {
           const inventoryDetails = storesWithInventory.find((store: any) => store.facilityId === storeData.storeCode);
           // only add stores information in array when having inventory for that store
           if(inventoryDetails) {
             this.nearbyStores.push({ ...storeData, ...inventoryDetails, distance: storeData.dist });
-          }
+          } else {
+          this.nearbyStores.push({ ...storeData, atp: 0 });
+        }
         });
       } catch (error) {
         console.error(error)
       } finally {
-        this.dismissLoader()
+        this.isloading = false
       }
     },