Implemented: Added support for adding and updating the email address …

…of a facility and formatted the country code (hotwax#337)

src/components/FacilityAddressModal.vue

@@ -56,11 +56,16 @@
           <ion-text slot="start" v-if="telecomNumberValue?.countryCode">{{ telecomNumberValue?.countryCode }}</ion-text>
         </ion-input>
       </ion-item>
+      <ion-item>
+        <ion-input label-placement="floating" v-model="emailAddress.infoString">
+          <div slot="label">{{ translate("Email address") }}</div>
+        </ion-input>
+      </ion-item>
     </form>
   </ion-content>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button @click="saveContact()" :disabled="!isAddressUpdated() && !isTelecomNumberUpdated()">
+    <ion-fab-button @click="saveContact()" :disabled="!isAddressUpdated() && !isTelecomNumberUpdated() && !isEmailAddressUpdated()">
       <ion-icon :icon="saveOutline" />
     </ion-fab-button>
   </ion-fab>
@@ -93,7 +98,7 @@ import { translate } from '@hotwax/dxp-components'
 import { FacilityService } from '@/services/FacilityService';
 import { getTelecomCountryCode, hasError } from "@/adapter";
 import logger from "@/logger";
-import { showToast } from "@/utils";
+import { showToast, isValidEmail } from "@/utils";
 import emitter from "@/event-bus";
 
 export default defineComponent({
@@ -121,19 +126,21 @@ export default defineComponent({
       postalAddress: 'facility/getPostalAddress',
       countries: 'util/getCountries',
       states: 'util/getStates',
-      telecomNumber: 'facility/getTelecomNumber'
+      contactDetails: 'facility/getTelecomAndEmailAddress'
     })
   },
   data() {
     return {
       address: {} as any,
-      telecomNumberValue: {} as any
+      telecomNumberValue: {} as any,
+      emailAddress: {} as any
     }
   },
   props: ['facilityId', 'facilityName'],
   beforeMount() {
     this.address = JSON.parse(JSON.stringify(this.postalAddress))
-    this.telecomNumberValue = this.telecomNumber ? JSON.parse(JSON.stringify(this.telecomNumber)) : {}
+    this.telecomNumberValue = this.contactDetails?.telecomNumber ? JSON.parse(JSON.stringify(this.contactDetails.telecomNumber)) : {}
+    this.emailAddress = this.contactDetails?.emailAddress ? JSON.parse(JSON.stringify(this.contactDetails.emailAddress)) : {};
   },
   async mounted() {
     await this.store.dispatch('util/fetchCountries', { countryGeoId: this.address?.countryGeoId })
@@ -157,8 +164,14 @@ export default defineComponent({
         return
       }
 
+      if(this.emailAddress.infoString && !isValidEmail(this.emailAddress.infoString)) {
+        showToast(translate("Invalid email address"))
+        return
+      }
+
       emitter.emit('presentLoader')
       const isTelecomNumberUpdated = this.isTelecomNumberUpdated()
+      const isEmailAddressUpdated = this.isEmailAddressUpdated()
 
       if(this.isAddressUpdated()) {
         try {
@@ -186,6 +199,7 @@ export default defineComponent({
       }
 
       if(isTelecomNumberUpdated) await this.saveTelecomNumber()
+      if(isEmailAddressUpdated) await this.saveEmailAddress()
 
       modalController.dismiss({ postalAddress })
       emitter.emit('dismissLoader')
@@ -197,21 +211,52 @@ export default defineComponent({
         facilityId: this.facilityId,
         contactMechPurposeTypeId: 'PRIMARY_PHONE',
         contactNumber: this.telecomNumberValue.contactNumber.trim(),
-        countryCode: this.telecomNumberValue.countryCode
+        countryCode: this.telecomNumberValue.countryCode.replace('+', '')
       }
 
       try {
-        if(this.telecomNumber?.contactMechId) {
+        if(this.contactDetails.telecomNumber?.contactMechId) {
           resp = await FacilityService.updateFacilityTelecomNumber({
             ...payload,
-            contactMechId: this.telecomNumber.contactMechId,
+            contactMechId: this.contactDetails.telecomNumber.contactMechId,
           })
         } else {
           resp = await FacilityService.createFacilityTelecomNumber(payload)
         }
 
         if(!hasError(resp)) {
-          await this.store.dispatch('facility/fetchFacilityTelecomNumber', { facilityId: this.facilityId })
+          await this.store.dispatch('facility/fetchFacilityTelecomAndEmailAddress', { facilityId: this.facilityId })
+        } else {
+          throw resp.data
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    },
+    async saveEmailAddress() {
+      let resp = {} as any;
+
+      const payload = {
+        facilityId: this.facilityId,
+        emailAddress: this.emailAddress.infoString
+      }
+
+      try {
+        if(this.contactDetails.emailAddress?.contactMechId) {
+          resp = await FacilityService.updateFacilityEmailAddress({
+            ...payload,
+            contactMechId: this.emailAddress.contactMechId,
+          })
+        } else {
+          resp = await FacilityService.createFacilityEmailAddress({
+            ...payload,
+            contactMechTypeId: 'EMAIL_ADDRESS',
+            contactMechPurposeTypeId: 'PRIMARY_EMAIL',
+          })
+        }
+
+        if(!hasError(resp)) {
+          await this.store.dispatch('facility/fetchFacilityTelecomAndEmailAddress', { facilityId: this.facilityId })
         } else {
           throw resp.data
         }
@@ -232,8 +277,11 @@ export default defineComponent({
         : true
     },
     isTelecomNumberUpdated() {
-      return this.telecomNumberValue.contactNumber && JSON.stringify(this.telecomNumberValue) !== JSON.stringify(this.telecomNumber)
-    }
+      return this.telecomNumberValue?.contactNumber && JSON.stringify(this.telecomNumberValue.contactNumber) !== JSON.stringify(this.contactDetails?.telecomNumber?.contactNumber)
+    },
+    isEmailAddressUpdated() {
+      return this.emailAddress?.infoString && JSON.stringify(this.emailAddress.infoString) !== JSON.stringify(this.contactDetails?.emailAddress?.infoString);
+    },
   },
   setup() {
     const store = useStore()

src/locales/en.json

@@ -87,6 +87,7 @@
   "Edit location": "Edit location",
   "End Time": "End Time",
   "Facility group created.": "Facility group created.",
+  "Email address": "Email address",
   "External ID": "External ID",
   "External mapping created successfully": "External mapping created successfully",
   "External mapping updated successfully": "External mapping updated successfully",
@@ -202,6 +203,7 @@
   "Internal ID": "Internal ID",
   "Internal ID cannot be more than 20 characters.": "Internal ID cannot be more than 20 characters.",
   "Internal locations": "Internal locations",
+  "Invalid email address": "Invalid email address",
   "is now selling on": "{facilityName} is now selling on {facilityGroupId}.",
   "Instance Url": "Instance Url",
   "Language": "Language",

src/services/FacilityService.ts

@@ -779,6 +779,22 @@ const updateFacilityTelecomNumber = async (payload: any): Promise<any> => {
   })
 }
 
+const createFacilityEmailAddress = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/createFacilityEmailAddress",
+    method: "post",
+    data: payload
+  })
+}
+
+const updateFacilityEmailAddress = async (payload: any): Promise<any> => {
+  return api({
+    url: "service/updateFacilityEmailAddress",
+    method: "post",
+    data: payload
+  })
+}
+
 const createProductStoreFacilityGroup = async (payload: any): Promise<any> => {
   return api({
     url: "service/createProductStoreFacilityGroup",
@@ -804,6 +820,7 @@ export const FacilityService = {
   createFacilityLocation,
   createVirtualFacility,
   createEnumeration,
+  createFacilityEmailAddress,
   createFacilityCalendar,
   createFacilityIdentification,
   createFacilityPostalAddress,
@@ -841,6 +858,7 @@ export const FacilityService = {
   removeFacilityFromGroup,
   removePartyFromFacility,
   updateFacility,
+  updateFacilityEmailAddress,
   updateFacilityGroup,
   updateFacilityIdentification,
   updateFacilityLocation,

src/store/modules/facility/actions.ts

@@ -260,26 +260,32 @@ const actions: ActionTree<FacilityState, RootState> = {
 
     commit(types.FACILITY_POSTAL_ADDRESS_UPDATED , postalAddress);
   },
-  async fetchFacilityTelecomNumber({ commit }, payload) {
-    let telecomNumber;
+  async fetchFacilityTelecomAndEmailAddress({ commit }, payload) {
     const params = {
       inputFields: {
-        contactMechPurposeTypeId: 'PRIMARY_PHONE',
-        contactMechTypeId: 'TELECOM_NUMBER',
+        contactMechPurposeTypeId: ['PRIMARY_PHONE', 'PRIMARY_EMAIL'],
+        contactMechPurposeTypeId_op: 'in',
+        contactMechTypeId: ['TELECOM_NUMBER', 'EMAIL_ADDRESS'],
+        contactMechTypeId_op: 'in',
         facilityId: payload.facilityId
       },
       entityName: "FacilityContactDetailByPurpose",
       orderBy: 'fromDate DESC',
       filterByDate: 'Y',
-      fieldList: ['contactMechId', 'contactNumber', 'countryCode'],
-      viewSize: 1
+      fieldList: ['contactMechId', 'contactNumber', 'countryCode', 'infoString'],
+      viewSize: 2
     }
 
     try {
       const resp = await FacilityService.fetchFacilityContactDetails(params)
       if(!hasError(resp)) {
-        telecomNumber = resp.data.docs[0]
-        commit(types.FACILITY_TELECOM_NUMBER_UPDATED , telecomNumber);
+        const response = resp.data.docs
+        const contactDetails = {
+          telecomNumber: response.find((item: any) => item.infoString === null),
+          emailAddress: response.find((item: any) => item.infoString !== null)
+        };
+
+        commit(types.FACILITY_TELECOM_AND_EMAIL_ADDRESS_UPDATED , contactDetails);
       } else {
         throw resp.data
       }

src/store/modules/facility/getters.ts

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

src/store/modules/facility/mutation-types.ts

@@ -5,7 +5,7 @@ export const FACILITY_GROUP_QUERY_UPDATED = SN_FACILITY + '/GROUP_QUERY_UPDATED'
 export const FACILITY_CURRENT_UPDATED = SN_FACILITY + '/CURRENT_UPDATED'
 export const FACILITY_LOCATIONS_UPDATED = SN_FACILITY + '/LOCATIONS_UPDATED'
 export const FACILITY_POSTAL_ADDRESS_UPDATED = SN_FACILITY + '/POSTAL_ADDRESS_UPDATED'
-export const FACILITY_TELECOM_NUMBER_UPDATED = SN_FACILITY + '/CONTACT_NUMBER_UPDATED'
+export const FACILITY_TELECOM_AND_EMAIL_ADDRESS_UPDATED = SN_FACILITY + '/TELECOM_AND_EMAIL_ADDRESS_UPDATED'
 export const FACILITY_MAPPINGS_UPDATED = SN_FACILITY + '/MAPPINGS_UPDATED'
 export const FACILITY_SHOPIFY_MAPPINGS_UPDATED = SN_FACILITY + '/SHOPIFY_MAPPINGS_UPDATED'
 export const FACILITY_CALENDAR_UPDATED = SN_FACILITY + '/CALENDAR_UPDATED'

src/store/modules/facility/mutations.ts

@@ -19,8 +19,8 @@ const mutations: MutationTree <FacilityState> = {
   [types.FACILITY_CURRENT_UPDATED](state, payload) {
     state.current = payload
   },
-  [types.FACILITY_TELECOM_NUMBER_UPDATED](state, payload) {
-    state.current.telecomNumber = payload
+  [types.FACILITY_TELECOM_AND_EMAIL_ADDRESS_UPDATED](state, payload) {
+    state.current.contactDetails = payload
   },
   [types.FACILITY_POSTAL_ADDRESS_UPDATED](state, payload) {
     state.current.postalAddress = payload

src/views/AddFacilityAddress.vue

@@ -53,6 +53,11 @@
                 <ion-text slot="start" v-if=countryCode>{{ countryCode }}</ion-text>
               </ion-input>
             </ion-item>
+            <ion-item lines="none">
+              <ion-input label-placement="floating" v-model="emailAddress">
+                <div slot="label">{{ translate('Email address') }}</div>              
+              </ion-input>
+            </ion-item>
           </ion-list>
         </ion-card>
 
@@ -116,7 +121,7 @@ import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router'
 import { colorWandOutline, locationOutline } from 'ionicons/icons';
 import { translate } from "@hotwax/dxp-components";
-import { showToast } from "@/utils";
+import { showToast, isValidEmail } from "@/utils";
 import logger from "@/logger";
 import { getTelecomCountryCode, hasError } from "@/adapter";
 import { FacilityService } from "@/services/FacilityService";
@@ -164,7 +169,8 @@ export default defineComponent({
         longitude: '',
       },
       contactNumber: '',
-      countryCode: ''
+      countryCode: '',
+      emailAddress: ''
     }
   },
   props: ['facilityId'],
@@ -179,6 +185,12 @@ export default defineComponent({
         showToast("Please fill all the required fields.")
         return
       }
+
+      if(this.emailAddress && !isValidEmail(this.emailAddress)) {
+        showToast(translate("Invalid email address"))
+        return
+      }
+
       const payload = {
         facilityId: this.facilityId,
         contactMechPurposeTypeId: 'PRIMARY_LOCATION',
@@ -198,6 +210,7 @@ export default defineComponent({
         logger.error("Failed to create facility address.", error)
       }
       if(this.contactNumber) this.saveTelecomNumber()
+      if(this.emailAddress) this.saveEmailAddress()
     },
     async generateLatLong() {
       const postalCode = this.formData.postalCode;
@@ -235,7 +248,7 @@ export default defineComponent({
           facilityId: this.facilityId,
           contactMechPurposeTypeId: 'PRIMARY_PHONE',
           contactNumber: this.contactNumber.trim(),
-          countryCode: this.countryCode
+          countryCode: this.countryCode.replace('+', '')
         })
 
         if(hasError(resp)) {
@@ -245,6 +258,22 @@ export default defineComponent({
         logger.error(err)
       }
     },
+    async saveEmailAddress() {
+      try {
+        const resp = await FacilityService.createFacilityEmailAddress({
+          facilityId: this.facilityId,
+          contactMechTypeId: 'EMAIL_ADDRESS',
+          contactMechPurposeTypeId: 'PRIMARY_EMAIL',
+          emailAddress: this.emailAddress,
+        })
+
+        if(hasError(resp)) {
+          throw resp.data;
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    }
   },
   setup() {
     const store = useStore();

src/views/FacilityDetails.vue

@@ -53,7 +53,8 @@
                     <h3>{{ postalAddress.address2 }}</h3>
                     <p class="ion-text-wrap">{{ postalAddress.postalCode ? `${postalAddress.city}, ${postalAddress.postalCode}` : postalAddress.city }}</p>
                     <p class="ion-text-wrap">{{ postalAddress.countryGeoName ? `${postalAddress.stateGeoName}, ${postalAddress.countryGeoName}` : postalAddress.stateGeoName }}</p>
-                    <p class="ion-text-wrap" v-if="telecomNumber">{{ `${telecomNumber.countryCode}-${telecomNumber.contactNumber}` }}</p>
+                    <p class="ion-text-wrap" v-if="contactDetails?.telecomNumber">{{ `${contactDetails.telecomNumber?.countryCode}-${contactDetails.telecomNumber?.contactNumber}` }}</p>
+                    <p class="ion-text-wrap" v-if="contactDetails?.emailAddress">{{ contactDetails.emailAddress?.infoString }}</p>
                   </ion-label>
                 </ion-item>
                 <ion-button fill="clear" @click="openAddressModal">{{ translate("Edit") }}</ion-button>
@@ -639,7 +640,7 @@ export default defineComponent({
       baseUrl: "user/getBaseUrl",
       facilityGroupTypes: 'util/getFacilityGroupTypes',
       inventoryGroups: 'util/getInventoryGroups',
-      telecomNumber: 'facility/getTelecomNumber'
+      contactDetails: 'facility/getTelecomAndEmailAddress'
     })
   },
   props: ["facilityId"],
@@ -651,7 +652,7 @@ export default defineComponent({
       facilityTypeId: 'VIRTUAL_FACILITY',
       facilityTypeId_op: 'notEqual'
     })])
-    await Promise.all([this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityParties', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityMappings', { facilityId: this.facilityId, facilityIdenTypeIds: Object.keys(this.externalMappingTypes)}), this.store.dispatch('facility/fetchShopifyFacilityMappings', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityProductStores', { facilityId: this.facilityId }), this.store.dispatch('util/fetchProductStores'), this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId }), this.store.dispatch('util/fetchCalendars'), this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityLogins', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityTelecomNumber', { facilityId: this.facilityId })])
+    await Promise.all([this.store.dispatch('facility/fetchFacilityLocations', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityParties', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityMappings', { facilityId: this.facilityId, facilityIdenTypeIds: Object.keys(this.externalMappingTypes)}), this.store.dispatch('facility/fetchShopifyFacilityMappings', { facilityId: this.facilityId }), this.store.dispatch('facility/getFacilityProductStores', { facilityId: this.facilityId }), this.store.dispatch('util/fetchProductStores'), this.store.dispatch('facility/fetchFacilityContactDetails', { facilityId: this.facilityId }), this.store.dispatch('util/fetchCalendars'), this.store.dispatch('facility/fetchFacilityCalendar', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityLogins', { facilityId: this.facilityId }), this.store.dispatch('facility/fetchFacilityTelecomAndEmailAddress', { facilityId: this.facilityId })])
     this.defaultDaysToShip = this.current.defaultDaysToShip
     this.isLoading = false
     this.parentFacilityTypeId = this.current.parentFacilityTypeId