Merge pull request #194 from amansinghbais/104-facility-mobile-support

Implemented: support for facility's primary phone number(#104)

package.json

@@ -18,7 +18,7 @@
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.2.4",
     "@hotwax/dxp-components": "^1.11.0",
-    "@hotwax/oms-api": "^1.11.0",
+    "@hotwax/oms-api": "^1.12.0",
     "@ionic/core": "^6.7.5",
     "@ionic/vue": "^6.7.5",
     "@ionic/vue-router": "^6.7.5",

src/adapter/index.ts

@@ -1,9 +1,10 @@
-import { api, client, getConfig, getUserFacilities, hasError, initialise, logout, resetConfig, setUserLocale, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
+import { api, client, getConfig, getTelecomCountryCode, getUserFacilities, hasError, initialise, logout, resetConfig, setUserLocale, updateInstanceUrl, updateToken } from '@hotwax/oms-api'
 
 export {
   api,
   client,
   getConfig,
+  getTelecomCountryCode,
   getUserFacilities,
   hasError,
   initialise,

src/components/FacilityAddressModal.vue

@@ -6,17 +6,20 @@
           <ion-icon slot="icon-only" :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
-      <ion-title>{{ translate("Address") }}</ion-title>
+      <ion-title>{{ translate("Address and contact details") }}</ion-title>
     </ion-toolbar>
   </ion-header>
 
   <ion-content>
-    <form @keyup.enter="saveAddress()">
+    <form @keyup.enter="saveContact()">
+      <ion-item-divider color="light">
+        <ion-label>{{ translate("Address") }}</ion-label>
+      </ion-item-divider>
       <ion-item>
         <ion-label position="floating">{{ translate("Address line 1") }} <ion-text color="danger">*</ion-text></ion-label>
         <ion-input v-model="address.address1" />
       </ion-item>
-      <ion-item class="ion-margin-bottom">
+      <ion-item>
         <ion-label position="floating">{{ translate("Address line 2") }}</ion-label>
         <ion-input v-model="address.address2" />
       </ion-item>
@@ -42,11 +45,20 @@
         <ion-label position="floating">{{ translate("Zipcode") }}</ion-label>
         <ion-input v-model="address.postalCode" />
       </ion-item>
+      <ion-item-divider color="light">
+        <ion-label>{{ translate("Contact details") }}</ion-label>
+      </ion-item-divider>
+      <ion-item>
+        <ion-label :position="telecomNumberValue?.countryCode ? 'stacked' : 'floating'">{{ translate("Contact number") }}</ion-label>
+        <ion-input v-model="telecomNumberValue.contactNumber">
+          <ion-text>{{ telecomNumberValue?.countryCode }}</ion-text>
+        </ion-input>
+      </ion-item>
     </form>
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button @click="saveAddress()" :disabled="!isAddressUpdated()">
+    <ion-fab-button @click="saveContact()" :disabled="!isAddressUpdated() && !isTelecomNumberUpdated()">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -63,6 +75,7 @@ import {
   IonIcon,
   IonInput,
   IonItem,
+  IonItemDivider,
   IonLabel,
   IonSelect,
   IonSelectOption,
@@ -76,7 +89,7 @@ import { mapGetters, useStore } from "vuex";
 import { closeOutline, saveOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from '@/services/FacilityService';
-import { hasError } from "@/adapter";
+import { getTelecomCountryCode, hasError } from "@/adapter";
 import logger from "@/logger";
 import { showToast } from "@/utils";
 import emitter from "@/event-bus";
@@ -93,6 +106,7 @@ export default defineComponent({
     IonIcon,
     IonInput,
     IonItem,
+    IonItemDivider,
     IonLabel,
     IonSelect,
     IonSelectOption,
@@ -104,26 +118,33 @@ export default defineComponent({
     ...mapGetters({
       postalAddress: 'facility/getPostalAddress',
       countries: 'util/getCountries',
-      states: 'util/getStates'
+      states: 'util/getStates',
+      telecomNumber: 'facility/getTelecomNumber'
     })
   },
   data() {
     return {
-      address: {} as any
+      address: {} as any,
+      telecomNumberValue: {} as any
     }
   },
   props: ['facilityId'],
   beforeMount() {
     this.address = JSON.parse(JSON.stringify(this.postalAddress))
+    this.telecomNumberValue = this.telecomNumber ? JSON.parse(JSON.stringify(this.telecomNumber)) : {}
   },
   async mounted() {
     await this.store.dispatch('util/fetchCountries', { countryGeoId: this.address?.countryGeoId })
+    if(this.address.countryGeoId) {
+      const country = this.countries.find((country: any) => country.geoId === this.address.countryGeoId)
+      this.telecomNumberValue.countryCode = getTelecomCountryCode(country.geoCode)
+    }
   },
   methods: {
     closeModal() {
       modalController.dismiss()
     },
-    async saveAddress() {
+    async saveContact() {
       let resp, postalAddress = '';
 
       if(!this.address?.address1 || !this.address?.city) {
@@ -132,41 +153,81 @@ export default defineComponent({
       }
 
       emitter.emit('presentLoader')
+      const isTelecomNumberUpdated = this.isTelecomNumberUpdated()
+
+      if(this.isAddressUpdated()) {
+        try {
+          if(this.address.contactMechId) {
+            resp = await FacilityService.updateFacilityPostalAddress({ ...this.address, facilityId: this.facilityId })
+          } else {
+            resp = await FacilityService.createFacilityPostalAddress({
+              ...this.address,
+              facilityId: this.facilityId,
+              contactMechPurposeTypeId: 'PRIMARY_LOCATION'
+            })
+          }
+
+          if(!hasError(resp)) {
+            postalAddress = this.address
+            await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
+            showToast(translate("Facility contact updated successfully."))
+          } else {
+            throw resp.data
+          }
+        } catch(err) {
+          showToast(translate("Failed to update facility contact."))
+          logger.error(err)
+        }
+      }
+
+      if(isTelecomNumberUpdated) this.saveTelecomNumber()
+
+      modalController.dismiss({ postalAddress })
+      emitter.emit('dismissLoader')
+    },
+    async saveTelecomNumber() {
+      let resp = {} as any;
+
+      const payload = {
+        facilityId: this.facilityId,
+        contactMechPurposeTypeId: 'PRIMARY_PHONE',
+        contactNumber: this.telecomNumberValue.contactNumber.trim(),
+        countryCode: this.telecomNumberValue.countryCode
+      }
 
       try {
-        if (this.address.contactMechId) {
-          resp = await FacilityService.updateFacilityPostalAddress({ ...this.address, facilityId: this.facilityId })
-        } else {
-          resp = await FacilityService.createFacilityPostalAddress({
-            ...this.address,
-            facilityId: this.facilityId,
-            contactMechPurposeTypeId: 'PRIMARY_LOCATION'
+        if(this.telecomNumber?.contactMechId) {
+          resp = await FacilityService.updateFacilityTelecomNumber({
+            ...payload,
+            contactMechId: this.telecomNumber.contactMechId,
           })
+        } else {
+          resp = await FacilityService.createFacilityTelecomNumber(payload)
         }
 
         if(!hasError(resp)) {
-          postalAddress = this.address
-          showToast(translate("Facility address updated successfully."))
-          await this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId })
+          await this.store.dispatch('facility/fetchFacilityTelecomNumber', { facilityId: this.facilityId })
         } else {
           throw resp.data
         }
       } catch(err) {
-        showToast(translate("Failed to update facility address."))
         logger.error(err)
       }
-      modalController.dismiss({ postalAddress })
-      emitter.emit('dismissLoader')
     },
     updateState(ev: CustomEvent) {
       this.store.dispatch('util/fetchStates', { geoId: ev.detail.value })
+      const country = this.countries.find((country: any) => country.geoId === ev.detail.value)
+      this.telecomNumberValue.countryCode = getTelecomCountryCode(country.geoCode)
     },
     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
+    },
+    isTelecomNumberUpdated() {
+      return this.telecomNumberValue.contactNumber && JSON.stringify(this.telecomNumberValue) !== JSON.stringify(this.telecomNumber)
     }
   },
   setup() {
@@ -176,6 +237,7 @@ export default defineComponent({
       closeOutline,
       saveOutline,
       store,
+      getTelecomCountryCode,
       translate
     };
   },

src/locales/en.json

@@ -12,6 +12,7 @@
   "Add Store Configuration": "Add Store Configuration",
   "Add timings": "Add timings",
   "Address": "Address",
+  "Address and contact details": "Address and contact details",
   "Address line 1": "Address line 1",
   "Address line 2": "Address line 2",
   "Add custom schedule": "Add custom schedule",
@@ -46,6 +47,9 @@
   "Configure the order fulfillment capacity of your facility.": "Configure the order fulfillment capacity of your facility.",
   "Confirm": "Confirm",
   "Consumed Order Limit": "Consumed Order Limit",
+  "Contact details": "Contact details",
+  "Contact number": "Contact number",
+  "Country": "Country",
   "Create ": "Create ",
   "Create Distribution Center login": "Create Distribution Center login",
   "Create group": "Create group",
@@ -63,7 +67,6 @@
   "Custom fulfillment capacity": "Custom fulfillment capacity",
   "Custom mapping": "Custom mapping",
   "Custom schedule": "Custom schedule",
-  "Country": "Country",
   "Daily timings": "Daily timings",
   "Days to ship": "Days to ship",
   "days to ship": "days to ship",
@@ -92,6 +95,7 @@
   "Facility address updated successfully.": "Facility address updated successfully.",
   "Facility created successfully.": "Facility created successfully.",
   "Facility configurations created successfully.": "Facility configurations created successfully.",
+  "Facility contact updated successfully.": "Facility contact updated successfully.",
   "Facility details": "Facility details",
   "Facility External ID": "Facility External ID",
   "Facility external ID updated.": "Facility external ID updated.",
@@ -147,7 +151,7 @@
   "Failed to unarchive parking.": "Failed to unarchive parking.",
   "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 contact.": "Failed to update facility contact.",
   "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 facility type.": "Failed to update facility type.",

src/services/FacilityService.ts

@@ -701,6 +701,22 @@ const fetchAssociatedFacilitiesToGroup = async (payload: any): Promise<any> => {
   })
 }
 
+const createFacilityTelecomNumber = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/createFacilityTelecomNumber",
+    method: "post",
+    data: payload
+  })
+}
+
+const updateFacilityTelecomNumber = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/updateFacilityTelecomNumber",
+    method: "post",
+    data: payload
+  })
+}
+
 export const FacilityService = {
   addFacilityToGroup,
   addPartyToFacility,
@@ -713,6 +729,7 @@ export const FacilityService = {
   createFacilityCalendar,
   createFacilityIdentification,
   createFacilityPostalAddress,
+  createFacilityTelecomNumber,
   createProductStoreFacility,
   createShopifyShopLocation,
   deleteFacilityGroup,
@@ -747,6 +764,7 @@ export const FacilityService = {
   updateFacilityIdentification,
   updateFacilityLocation,
   updateFacilityPostalAddress,
+  updateFacilityTelecomNumber,
   updateFacilityToGroup,
   updateProductStoreFacility,
   updateShopifyShopLocation

src/store/modules/facility/actions.ts

@@ -259,6 +259,33 @@ const actions: ActionTree<FacilityState, RootState> = {
 
     commit(types.FACILITY_POSTAL_ADDRESS_UPDATED , postalAddress);
   },
+  async fetchFacilityTelecomNumber({ commit }, payload) {
+    let telecomNumber;
+    const params = {
+      inputFields: {
+        contactMechPurposeTypeId: 'PRIMARY_PHONE',
+        contactMechTypeId: 'TELECOM_NUMBER',
+        facilityId: payload.facilityId
+      },
+      entityName: "FacilityContactDetailByPurpose",
+      orderBy: 'fromDate DESC',
+      filterByDate: 'Y',
+      fieldList: ['contactMechId', 'contactNumber', 'countryCode'],
+      viewSize: 1
+    }
+
+    try {
+      const resp = await FacilityService.fetchFacilityContactDetails(params)
+      if(!hasError(resp)) {
+        telecomNumber = resp.data.docs[0]
+        commit(types.FACILITY_TELECOM_NUMBER_UPDATED , telecomNumber);
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error('Failed to fetch the contact number for the facility', err)
+    }
+  },
 
   updateFacilityQuery({ commit }, query) {
     commit(types.FACILITY_QUERY_UPDATED, query)

src/store/modules/facility/getters.ts

@@ -50,6 +50,9 @@ const getters: GetterTree <FacilityState, RootState> = {
   },
   getPostalAddress(state) {
     return state.current?.postalAddress ? JSON.parse(JSON.stringify(state.current.postalAddress)) : {}
+  },
+  getTelecomNumber(state) {
+    return state.current?.telecomNumber
   }
 }
 export default getters;