Merge pull request #43 from amansinghbais/facilities/#37

Implemented: latitude and longitude regenration, remove functionality. (#37)

src/components/FacilityGeoPointModal.vue

@@ -101,7 +101,7 @@ export default defineComponent({
       const payload = {
         json: {
           params: {
-            q: `postcode: ${this.postalAddress.postalCode}`
+            q: `postcode: ${this.geoPoint.postalCode}`
           }
         }
       }
@@ -117,29 +117,29 @@ export default defineComponent({
           throw resp.data
         }
       } catch(err) {
-        showToast(translate("Failed to generate latitude & Longitude."))
+        showToast(translate("Failed to generate latitude and longitude."))
         logger.error(err)
       }
     },
     async saveGeoPoint() {
-      if(!this.geoPoint.latitude || !this.geoPoint.longitude || !this.geoPoint.postalCode) {
+      if(!this.geoPoint.latitude || !this.geoPoint.longitude) {
         showToast("Please fill all the required fields")
         return;
       }
 
       let resp;
 
       try {
-        resp = await FacilityService.updateFacilityPostalAddress({...this.geoPoint, facilityId: this.facilityId})
+        resp = await FacilityService.updateFacilityPostalAddress({...this.geoPoint, postalCode: this.postalAddress.postalCode, facilityId: this.facilityId})
 
         if(!hasError(resp)) {
-          showToast(translate("Facility latitude & longitude updated successfully."))
+          showToast(translate("Facility latitude and longitude updated successfully."))
           await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
         } else {
           throw resp.data
         }
       } catch(err) {
-        showToast(translate("Failed to update facility latitude & longitude."))
+        showToast(translate("Failed to update facility latitude and longitude."))
         logger.error(err)
       }
       modalController.dismiss()

src/components/GeoPointPopover.vue

@@ -0,0 +1,118 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-item button :disabled="!isRegenerationRequired" @click="regenerateLatitudeAndLongitude">
+        {{ translate("Regenerate") }}
+      </ion-item>
+      <ion-item button lines="none" @click="removeLatitudeAndLongitude">
+        {{ translate("Remove") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  popoverController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+import { mapGetters, useStore } from "vuex";
+import { FacilityService } from "@/services/FacilityService";
+import { hasError } from "@/adapter";
+import { showToast } from "@/utils";
+import logger from "@/logger";
+import { UtilService } from '@/services/UtilService';
+
+export default defineComponent({
+  name: "LocationDetailsPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList
+  },
+  computed: {
+    ...mapGetters({
+      postalAddress: 'facility/getPostalAddress',
+    })
+  },
+  props: ['facilityId', 'isRegenerationRequired'],
+  methods: {
+    async regenerateLatitudeAndLongitude() {
+      let resp;
+
+      try {
+        resp = await UtilService.generateLatLong({
+          json: {
+            params: {
+              q: `postcode: ${this.postalAddress.postalCode}`
+            }
+          }
+        })
+
+        if(!hasError(resp)) {
+          const generatedLatLong = resp.data.response.docs[0]
+
+          if(generatedLatLong.latitude && generatedLatLong.longitude) {
+            resp = await FacilityService.updateFacilityPostalAddress({
+              ...this.postalAddress,
+              facilityId: this.facilityId,
+              latitude: generatedLatLong.latitude,
+              longitude: generatedLatLong.longitude
+            })
+
+            if(!hasError(resp)) {
+              showToast(translate("Successfully regenerated latitude and longitude for the facility."))
+              await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
+            } else {
+              throw resp.data
+            }
+          }
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate("Failed to regenerate latitude and longitude for the facility."))
+        logger.error(err);
+      }
+
+      popoverController.dismiss()
+    },
+    async removeLatitudeAndLongitude() {
+      let resp;
+
+      try {
+        resp = await FacilityService.updateFacilityPostalAddress({
+          ...this.postalAddress,
+          facilityId: this.facilityId,
+          latitude: '',
+          longitude: ''
+        })
+
+        if(!hasError(resp)) {
+          showToast(translate("Facility latitude and longitude removed successfully."))
+          await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        showToast(translate("Failed to remove facility latitude and longitude."))
+        logger.error(err)
+      }
+
+      popoverController.dismiss()
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+      translate
+    };
+  }
+});
+</script>

src/locales/en.json

@@ -63,37 +63,40 @@
   "Facility": "Facility",
   "Facility address updated successfully.": "Facility address updated successfully.",
   "Facility details": "Facility details",
-  "Facility latitude & longitude updated successfully.": "Facility latitude & longitude updated successfully.",
   "Facility ID": "Facility ID",
+  "Facility latitude and longitude removed successfully.": "Facility latitude and longitude removed successfully.",
+  "Facility latitude and longitude updated successfully.": "Facility latitude and longitude updated successfully.",
   "Facility location created successfully": "Facility location created successfully",
   "Facility location removed successfully": "Facility location removed successfully", 
   "Facility location updated successfully": "Facility location updated successfully",
   "Facility name": "Facility name",
   "Facility name is required.": "Facility name is required.",
   "Facility Management": "Facility Management",
+  "Facility zipcode": "Facility zipcode",
   "Failed to add some product stores to the facility.": "Failed to add some product stores to the facility.",
   "Failed to create calendar to the facility.": "Failed to create calendar to the facility.",
   "Failed to create external mapping": "Failed to create external mapping",
   "Failed to create facility.": "Failed to create facility.",
   "Failed to create facility address.": "Failed to create facility address.",
   "Failed to create facility location": "Failed to create facility location",
+  "Failed to create facility login credentials.": "Failed to create facility login credentials.",
   "Failed to create shopify mapping": "Failed to create shopify mapping",
   "Failed to fetch facility information": "Failed to fetch facility information",
+  "Failed to fetch shopify shops.": "Failed to fetch shopify shops.",
   "Failed to find the facility locations": "Failed to find the facility locations",
   "Failed to generate latitude and longitude.": "Failed to generate latitude and longitude.",
   "Failed to make product store as primary.": "Failed to make product store as primary.",
-  "Failed to create facility login credentials.": "Failed to create facility login credentials.",
-  "Failed to fetch shopify shops.": "Failed to fetch shopify shops.",
-  "Failed to generate latitude & Longitude.": "Failed to generate latitude & Longitude.",
   "Failed to make product store primary.": "Failed to make product store primary.",
+  "Failed to regenerate latitude and longitude for the facility.": "Failed to regenerate latitude and longitude for the facility.",
+  "Failed to remove facility latitude and longitude.": "Failed to remove facility latitude and longitude.",
   "Failed to remove facility location": "Failed to remove facility location",
   "Failed to remove facility mapping": "Failed to remove facility mapping",
   "Failed to remove party from facility.": "Failed to remove party from facility.",
   "Failed to remove shopify mapping": "Failed to remove shopify mapping",
   "Failed to update default days to ship": "Failed to update default days to ship",
   "Failed to update external mapping": "Failed to update external mapping",
   "Failed to update facility address.": "Failed to update facility address.",
-  "Failed to update facility latitude & longitude.": "Failed to update facility latitude & longitude.",
+  "Failed to update facility latitude and longitude.": "Failed to update facility latitude and longitude.",
   "Failed to update facility location": "Failed to update facility location",
   "Failed to update fulfillment capacity for ": "Failed to update fulfillment capacity for {facilityName}",
   "Failed to update fulfillment setting": "Failed to update fulfillment setting",
@@ -174,6 +177,7 @@
   "Product Stores": "Product Stores",
   "Product stores updated successfully.": "Product stores updated successfully.",
   "Reason:": "Reason:",
+  "Regenerate": "Regenerate",
   "Remove": "Remove",
   "Remove location": "Remove location",
   "Remove schedules": "Remove schedules",
@@ -222,6 +226,7 @@
   "Store unlink failed.": "Store unlink failed.",
   "Store unlinked successfully.": "Store unlinked successfully.",
   "Successfully associated calendar to the facility.": "Successfully associated calendar to the facility.",
+  "Successfully regenerated latitude and longitude for the facility.": "Successfully regenerated latitude and longitude for the facility.",
   "Sunday": "Sunday",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.": "These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.",

src/views/FacilityDetails.vue

@@ -50,6 +50,10 @@
                 <ion-card-content>
                   {{ translate("These values are used to help customers lookup how close they are to your stores when they are finding nearby stores.") }}
                 </ion-card-content>
+                <ion-item lines="full">
+                  <ion-label>{{ translate("Facility zipcode") }}</ion-label>
+                  <p><ion-text :color="isRegenerationRequired ? 'danger' : ''" slot="end">{{ postalAddress.postalCode }}</ion-text></p>
+                </ion-item>
                 <ion-item lines="full">
                   <ion-label>{{ translate("Latitude") }}</ion-label>
                   <p>{{ postalAddress.latitude }}</p>
@@ -58,7 +62,12 @@
                   <ion-label>{{ translate("Longitude") }}</ion-label>
                   <p>{{ postalAddress.longitude }}</p>
                 </ion-item>
-                <ion-button fill="clear" :disabled="!postalAddress.address1" @click="openGeoPointModal">{{ translate("Edit") }}</ion-button>
+                <div class="actions">
+                  <ion-button fill="clear" :disabled="!postalAddress.address1" @click="openGeoPointModal">{{ translate("Edit") }}</ion-button>
+                  <ion-button slot="end" fill="clear" color="medium" @click="openLatLongPopover">
+                    <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+                  </ion-button>
+                </div>
               </template>
               <ion-button v-else expand="block" fill="outline" :disabled="!postalAddress.address1" @click="openGeoPointModal">
                 {{ translate("Add") }}
@@ -459,6 +468,8 @@ import FacilityShopifyMappingModal from '@/components/FacilityShopifyMappingModa
 import FacilityMappingModal from '@/components/FacilityMappingModal.vue'
 import { showToast } from '@/utils';
 import OperatingHoursPopover from '@/components/OperatingHoursPopover.vue'
+import GeoPointPopover from '@/components/GeoPointPopover.vue'
+import { UtilService } from '@/services/UtilService';
 
 export default defineComponent({
   name: 'FacilityDetails',
@@ -497,7 +508,8 @@ export default defineComponent({
       defaultDaysToShip: '', // not assinging 0 by default as it will convey the user that the facility can ship same day, but actually defaultDays are not setup on the facility
       primaryMember: {} as any,
       isCalendarFound: true,
-      selectedCalendarId: ''
+      selectedCalendarId: '',
+      isRegenerationRequired: true
     }
   },
   computed: {
@@ -523,6 +535,7 @@ export default defineComponent({
     this.defaultDaysToShip = this.current.defaultDaysToShip
     this.isLoading = false
     this.fetchFacilityPrimaryMember()
+    if(this.postalAddress.latitude) this.fetchPostalCodeByGeoPoints()
   },
   methods: {
     goToLink(link: string) {
@@ -548,6 +561,20 @@ export default defineComponent({
 
       return popover.present()
     },
+    async openLatLongPopover(event: Event) {
+      const popover = await popoverController.create({
+        component: GeoPointPopover,
+        componentProps: { facilityId: this.facilityId, isRegenerationRequired: this.isRegenerationRequired },
+        event,
+        showBackdrop: false
+      });
+
+      popover.onDidDismiss().then(async() => {
+        await this.fetchPostalCodeByGeoPoints()
+      })
+
+      return popover.present()
+    },
     async associateCalendarToFacility() {
       let resp;
 
@@ -592,6 +619,10 @@ export default defineComponent({
         componentProps: { facilityId: this.facilityId }
       })
 
+      geoPointModal.onDidDismiss().then(async() => {
+        await this.fetchPostalCodeByGeoPoints()
+      } )
+
       geoPointModal.present()
     },
     async selectProductStores() {
@@ -784,7 +815,7 @@ export default defineComponent({
     },
     async revokePrimaryStatusFromStore() {
       try {
-        const resp = await FacilityService.updateFacilityToGroup({
+        await FacilityService.updateFacilityToGroup({
           "facilityId": this.facilityId,
           "facilityGroupId": this.primaryMember.facilityGroupId,
           "fromDate": this.primaryMember.fromDate,
@@ -937,6 +968,32 @@ export default defineComponent({
       const openTime = DateTime.fromFormat(startTime, 'HH:mm:ss').toFormat('HH:mm a');
       const endTime = DateTime.fromMillis(DateTime.fromFormat(startTime, 'HH:mm:ss').toMillis() + capacity).toFormat('hh:mm a')
       return `${openTime} - ${endTime}`
+    },
+    async fetchPostalCodeByGeoPoints() {
+      const payload = {
+        json: {
+          "query": "*:*",
+          "filter": "{!geofilt sfield=location}",
+          "params": {
+            "pt": `${this.postalAddress.latitude}, ${this.postalAddress.longitude}`,
+            "d": "10"
+          },
+          sort: 'geodist(location, ' + this.postalAddress.latitude + ',' + this.postalAddress.longitude + ') asc',
+          "limit": 1
+        }
+      }
+
+      try {
+        const resp = await UtilService.generateLatLong(payload)
+
+        if(!hasError(resp)) {
+          this.isRegenerationRequired = !(this.postalAddress.postalCode === resp.data.response.docs[0].postcode)
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+      }
     }
   },
   setup() {
@@ -1008,4 +1065,9 @@ ion-segment {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   align-items: start; 
 }
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/views/FindFacilities.vue

@@ -46,7 +46,7 @@
         <main v-if="facilities?.length">
           <div class="list-item" v-for="(facility, index) in facilities" :key="index" @click="viewFacilityDetails(facility.facilityId)">
             <ion-item lines="none">
-              <ion-icon slot="start" :icon="facilityTypes[facility.facilityTypeId].parentTypeId === 'DISTRIBUTION_CENTER' ? businessOutline : storefrontOutline" />
+              <ion-icon slot="start" :icon="facilityTypes[facility.facilityTypeId]?.parentTypeId === 'DISTRIBUTION_CENTER' ? businessOutline : storefrontOutline" />
               <ion-label>
                 <p class="overline">{{ facility.facilityTypeId ? facilityTypes[facility.facilityTypeId] ? facilityTypes[facility.facilityTypeId].description : facilityTypes.facilityTypeId : '' }}</p>
                 {{ facility.facilityName }}