Merge pull request #34 from k2maan/create-facility-flow

Improved: overall app flow by fixing bugs
hotwax · Nov 29, 2023 · 8826fae · 8826fae
2 parents 7ff1521 + 8e44ab6
commit 8826fae
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 27 deletions.
diff --git a/src/components/FacilityAddressModal.vue b/src/components/FacilityAddressModal.vue
@@ -11,7 +11,7 @@
   </ion-header>
 
   <ion-content>
-    <form @keyup.enter="saveAddress">
+    <form @keyup.enter="saveAddress()">
       <ion-item>
         <ion-label position="floating">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
         <ion-input v-model="address.address1" />
@@ -44,7 +44,7 @@
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button @click="saveAddress">
+    <ion-fab-button @click="saveAddress()" :disabled="!isAddressUpdated()">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -121,12 +121,6 @@ export default defineComponent({
       modalController.dismiss()
     },
     async saveAddress() {
-      const isAddressUpdated = Object.entries(this.postalAddress).filter(([addressKey, addressValue]) => this.address[addressKey] !== addressValue).length
-      if(!isAddressUpdated) {
-        showToast(translate("Please fill all the required fields"))
-        return;
-      }
-
       let resp;
 
       if(!this.address?.address1 || !this.address?.city) {
@@ -135,10 +129,14 @@ export default defineComponent({
       }
 
       try {
-        if(this.address.contactMechId) {
-          resp = await FacilityService.updateFacilityPostalAddress({...this.address, facilityId: this.facilityId })
+        if (this.address.contactMechId) {
+          resp = await FacilityService.updateFacilityPostalAddress({ ...this.address, facilityId: this.facilityId })
         } else {
-          resp = await FacilityService.createFacilityPostalAddress(this.address)
+          resp = await FacilityService.createFacilityPostalAddress({
+            ...this.address,
+            facilityId: this.facilityId,
+            contactMechPurposeTypeId: 'PRIMARY_LOCATION'
+          })
         }
 
         if(!hasError(resp)) {
@@ -155,6 +153,13 @@ export default defineComponent({
     },
     updateState(ev: CustomEvent) {
       this.store.dispatch('util/fetchStates', { geoId: ev.detail.value })
+    },
+    isAddressUpdated() {
+      // in case postal address is not there - new facility is created
+      // hence explicitly returning true as .some check will fail
+      return Object.keys(this.postalAddress).length
+        ? Object.entries(this.postalAddress).some(([addressKey, addressValue]) => this.address[addressKey] !== addressValue)
+        : true
     }
   },
   setup() {

diff --git a/src/components/FacilityShopifyMappingModal.vue b/src/components/FacilityShopifyMappingModal.vue
@@ -29,17 +29,20 @@
         <ion-item>
           <ion-label>{{ translate("Shopify store") }}</ion-label>
           <ion-label slot="end" v-if="type && type === 'update'">{{ shopifyFacilityMapping.shopId }}</ion-label>
-          <!-- TODO: change field to select -->
-          <ion-input slot="end" v-else v-model="shopId" />
+          <ion-select v-else interface="popover" :placeholder="translate('Select')" v-model="shopId">
+            <ion-select-option v-for="shop in shopifyShops" :key="shop.shopId" :value="shop.shopId">
+              {{ shop.name ? shop.name : shop.shopId }}
+            </ion-select-option>
+          </ion-select>
         </ion-item>
         <ion-item>
           <ion-label>{{ translate("Location ID") }}</ion-label>
-          <ion-input slot="end" :placeholder="translate('add your location ID from Shopify')" v-model="shopifyLocationId" />
+          <ion-input :placeholder="translate('Add your location ID from Shopify')" v-model="shopifyLocationId" />
         </ion-item>
       </ion-list>
 
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-        <ion-fab-button @click="type && type === 'update' ? updateMapping : saveMapping" @keyup.enter.stop>
+        <ion-fab-button @click="type && type === 'update' ? updateMapping() : saveMapping()" @keyup.enter.stop>
           <ion-icon :icon="saveOutline" />
         </ion-fab-button>
       </ion-fab>
@@ -61,6 +64,8 @@ import {
   IonLabel,
   IonList,
   IonListHeader,
+  IonSelect,
+  IonSelectOption,
   IonTitle,
   IonToolbar,
   modalController
@@ -70,6 +75,7 @@ import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { mapGetters, useStore } from 'vuex'
 import { FacilityService } from '@/services/FacilityService'
+import { UtilService } from '@/services/UtilService'
 import { showToast } from "@/utils";
 import { hasError } from "@/adapter";
 import logger from "@/logger";
@@ -89,6 +95,8 @@ export default defineComponent({
     IonLabel,
     IonList,
     IonListHeader,
+    IonSelect,
+    IonSelectOption,
     IonTitle,
     IonToolbar
   },
@@ -100,12 +108,14 @@ export default defineComponent({
   data() {
     return {
       shopId: '',
-      shopifyLocationId: ''
+      shopifyLocationId: '',
+      shopifyShops: [] as any
     }
   },
   props: ["shopifyFacilityMapping", "type"],
-  mounted() {
+  async mounted() {
     this.shopifyLocationId = this.shopifyFacilityMapping?.shopifyLocationId
+    await this.fetchShopifyShops() 
   },
   methods: {
     closeModal() {
@@ -165,6 +175,25 @@ export default defineComponent({
         showToast(translate('Failed to update shopify mapping'))
         logger.error('Failed to update shopify mapping', err)
       }
+    },
+    async fetchShopifyShops() {
+      try {
+        const resp = await UtilService.fetchShopifyShops({
+          entityName: "ShopifyShop",
+          fieldList: ['shopId', 'name'],
+          noConditionFind: 'Y',
+          viewSize: 100
+        })
+
+        if (!hasError(resp)) {
+          this.shopifyShops = resp.data.docs
+        } else {
+          throw resp.data
+        }
+      } catch (error) {
+        showToast(translate('Failed to fetch shopify shops.'))
+        logger.error('Failed to fetch shopify shops.', error)
+      }
     }
   },
   setup() {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -10,7 +10,7 @@
   "Address": "Address",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
-  "add your location ID from Shopify": "add your location ID from Shopify",
+  "Add your location ID from Shopify": "Add your location ID from Shopify",
   "Aisle": "Aisle",
   "aisle": "aisle",
   "All": "All",
@@ -75,6 +75,7 @@
   "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 remove facility location": "Failed to remove facility location",

diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
@@ -72,6 +72,15 @@ const fetchExternalMappingTypes = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchShopifyShops = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "POST",
+    data: payload,
+    cache: true
+  })
+}
+
 export const UtilService = {
   fetchCountries,
   fetchExternalMappingTypes,
@@ -81,5 +90,6 @@ export const UtilService = {
   fetchStates,
   generateLatLong,
   fetchPartyRoles,
+  fetchShopifyShops
 }
 
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
@@ -1,8 +1,6 @@
 export default interface UtilState {
   facilityTypes: object;
   locationTypes: object;
-  countries: any[];
-  states: any;
   externalMappingTypes: object;
   productStores: any[];
   partyRoles: any[];

diff --git a/src/views/AddFacilityAddress.vue b/src/views/AddFacilityAddress.vue
@@ -91,7 +91,7 @@
             <ion-icon slot="start" :icon="locationOutline"/>
             {{ translate("Save address") }}
           </ion-button>
-          <ion-button @click="router.replace(`/add-facility-config/${facilityId}`)" fill="clear">
+          <ion-button @click="router.replace(`/add-facility-config/${facilityId}`)" color="medium" fill="clear">
             {{ translate("Add address later") }}
           </ion-button>
         </div>

diff --git a/src/views/AddFacilityConfig.vue b/src/views/AddFacilityConfig.vue
@@ -95,7 +95,7 @@
             <ion-icon slot="start" :icon="locationOutline"/>
             {{ translate("Save configurations") }}
           </ion-button>
-          <ion-button @click="router.replace(`/facility-details/${facilityId}`)" fill="clear">
+          <ion-button @click="router.replace(`/facility-details/${facilityId}`)" color="medium" fill="clear">
             {{ translate("Configure settings later") }}
           </ion-button>
         </div>

diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
@@ -660,6 +660,8 @@ export default defineComponent({
       // Note: here result.data returns 0 in some cases that's why it is compared with 'undefined'.
       if(result.data != undefined && result.data !== this.current.maximumOrderLimit) {
         await this.updateFacility(result.data, this.current)
+        // refetching the facility to update the maximumOrderLimit
+        await this.store.dispatch('facility/fetchCurrentFacility', this.facilityId)
       }
     },
     async updateFacility(maximumOrderLimit: number | string, facility: any) {
@@ -851,7 +853,6 @@ export default defineComponent({
         componentProps: { mappingId: mapping.facilityIdenTypeId, mapping, type: 'update' }
       })
 
-      await popoverController.dismiss()
       customMappingModal.present()
     },
     async editShopifyFacilityMapping(shopifyFacilityMapping: any) {
@@ -860,7 +861,6 @@ export default defineComponent({
         componentProps: { shopifyFacilityMapping, type: 'update' }
       })
 
-      await popoverController.dismiss()
       customMappingModal.present()
     }
   },

diff --git a/src/views/FindFacilities.vue b/src/views/FindFacilities.vue
@@ -89,12 +89,12 @@
           <ion-icon :icon="addOutline" />
         </ion-fab-button>
         <ion-fab-list side="top">
-          <ion-fab-button @click="router.push('/create-facility?type=DISTRIBUTION_CENTER')">
-            <ion-icon :icon="businessOutline" />
-          </ion-fab-button>
           <ion-fab-button @click="router.push('/create-facility?type=PHYSICAL_STORE')">
             <ion-icon :icon="storefrontOutline" />
           </ion-fab-button>
+          <ion-fab-button @click="router.push('/create-facility?type=DISTRIBUTION_CENTER')">
+            <ion-icon :icon="businessOutline" />
+          </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
 
@@ -238,6 +238,7 @@ export default defineComponent({
       // Note: here result.data returns 0 in some cases that's why it is compared with 'undefined'.
       if(result.data != undefined && result.data !== facility.maximumOrderLimit) {
         await this.updateFacility(result.data, facility)
+        await this.fetchFacilities()
       }
     },
     async updateFacility(maximumOrderLimit: number | string, facility: any) {