Merge pull request #52 from k2maan/improvements

Improved: bound create user login to native fulfilment setting on create facility, added support to check for facility ID length of 20 characters, added spinner while generating lat long and improved toast message on sell online setting updation

src/components/FacilityGeoPointModal.vue

@@ -16,7 +16,8 @@
         <ion-input :placeholder="translate('Zipcode')" v-model="geoPoint.postalCode" />
         <ion-button fill="outline" @click="generateLatLong">
           {{ translate("Generate") }}
-          <ion-icon slot="end" :icon="colorWandOutline" />
+          <ion-icon v-if="!isGeneratingLatLong" slot="end" :icon="colorWandOutline" />
+          <ion-spinner v-else data-spinner-size="small"/>
         </ion-button>
       </ion-item>
       <ion-item>
@@ -49,6 +50,7 @@ import {
   IonInput,
   IonItem,
   IonLabel,
+  IonSpinner,
   IonTitle,
   IonToolbar,
   modalController
@@ -76,6 +78,7 @@ export default defineComponent({
     IonInput,
     IonItem,
     IonLabel,
+    IonSpinner,
     IonTitle,
     IonToolbar,
   },
@@ -87,7 +90,8 @@ export default defineComponent({
   props: ['facilityId'],
   data() {
     return {
-      geoPoint: {} as any
+      geoPoint: {} as any,
+      isGeneratingLatLong: false
     }
   },
   beforeMount() {
@@ -98,6 +102,7 @@ export default defineComponent({
       modalController.dismiss()
     },
     async generateLatLong() {
+      this.isGeneratingLatLong = true
       const payload = {
         json: {
           params: {
@@ -120,6 +125,7 @@ export default defineComponent({
         showToast(translate("Failed to generate latitude and longitude."))
         logger.error(err)
       }
+      this.isGeneratingLatLong = false
     },
     async saveGeoPoint() {
       if(!this.geoPoint.latitude || !this.geoPoint.longitude) {
@@ -157,4 +163,10 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>
+
+<style scoped>
+[data-spinner-size="small"] {
+  transform: scale(0.5);
+}
+</style>

src/locales/en.json

@@ -118,6 +118,7 @@
   "Groups": "Groups",
   "Identification": "Identification",
   "Internal ID": "Internal ID",
+  "Internal ID cannot be more than 20 characters.": "Internal ID cannot be more than 20 characters.",
   "Instance Url": "Instance Url",
   "Language": "Language",
   "Latitude": "Latitude",
@@ -153,6 +154,8 @@
   "OMS": "OMS",
   "OMS instance": "OMS instance",
   "Online Order Fulfillment": "Online Order Fulfillment",
+  "Online inventory turned on for": "Online inventory turned on for {facilityName}",
+  "Online inventory turned off for": "Online inventory turned off for {facilityName}",
   "Open and close time": "Open and close time",
   "Opening Time": "Opening Time",
   "Operating hours": "Operating hours",
@@ -186,7 +189,6 @@
   "Reset": "Reset",
   "Role": "Role",
   "role": "role",
-  "Role(s) updated successfully.": "Role(s) updated successfully.",
   "Saturday": "Saturday",
   "Save": "Save",
   "Save address": "Save address",
@@ -245,11 +247,12 @@
   "Unlink": "Unlink",
   "Update days to ship": "Update days to ship",
   "Username": "Username",
+  "Username is required.": "Username is required.",
   "Uses native fulfillment app": "Uses native fulfillment app",
   "Version: ": "Version: { appVersion }",
   "View order count history": "View order count history",
   "View other schedules": "View other schedules",
   "Wednesday": "Wednesday",
   "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu.",
   "Zipcode": "Zipcode"
-  }
+}

src/store/modules/facility/actions.ts

@@ -136,13 +136,18 @@ const actions: ActionTree<FacilityState, RootState> = {
     facility.orderCount = facilityOrderCount[facility.facilityId] ? facilityOrderCount[facility.facilityId] : 0;
 
     const facilityGroupInfo = facilityGroupInformation[facility.facilityId]
-
-    if(facilityGroupInfo.length) {
+    if (facilityGroupInfo?.length) {
       facility.groupInformation = facilityGroupInfo
       facility.sellOnline = (facilityGroupInfo.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'FAC_GRP'))
       facility.useOMSFulfillment = (facilityGroupInfo.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'OMS_FULFILLMENT'))
       facility.generateShippingLabel = (facilityGroupInfo.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'AUTO_SHIPPING_LABEL'))
       facility.allowPickup = (facilityGroupInfo.some((facilityGroup: any) => facilityGroup.facilityGroupId === 'PICKUP'))
+    } else {
+      facility.groupInformation = []
+      facility.sellOnline = false
+      facility.useOMSFulfillment = false
+      facility.generateShippingLabel = false
+      facility.allowPickup = false
     }
 
     commit(types.FACILITY_CURRENT_UPDATED, facility)

src/views/AddFacilityConfig.vue

@@ -64,29 +64,39 @@
           <ion-list>
             <ion-item>
               <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
-              <ion-toggle :value="fulfillmentSettings.FAC_GRP" slot="end" @click="updateFulfillmentSettings($event, 'FAC_GRP')"/>
-            </ion-item>
-            <ion-item>
-              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
-              <ion-toggle :value="fulfillmentSettings.OMS_FULFILLMENT" slot="end" @click="updateFulfillmentSettings($event, 'OMS_FULFILLMENT')"/>
+              <ion-toggle v-model="fulfillmentSettings.FAC_GRP" slot="end"/>
             </ion-item>
             <ion-item>
               <ion-label>{{ translate("Allow pickup") }}</ion-label>
-              <ion-toggle :value="fulfillmentSettings.PICKUP" slot="end" @click="updateFulfillmentSettings($event, 'PICKUP')"/>
+              <ion-toggle v-model="fulfillmentSettings.PICKUP" slot="end"/>
             </ion-item>
             <ion-item>
-              <ion-label>{{ translate("Create login credentials") }}</ion-label>
-              <ion-toggle :value="createLoginCreds" @click="createLoginCreds = !createLoginCreds" slot="end" />
-            </ion-item>
-            <ion-item v-if="createLoginCreds" ref="password">
-              <ion-label position="floating">
-                {{ translate('Password') }} <ion-text color="danger">*</ion-text>
-              </ion-label>
-              <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password"/>
-              <ion-note slot="helper">
-                {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
-              </ion-note>
+              <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
+              <ion-toggle v-model="fulfillmentSettings.OMS_FULFILLMENT" slot="end" @ionChange="createLoginCreds = true"/>
             </ion-item>
+            <template v-if="fulfillmentSettings.OMS_FULFILLMENT">
+              <ion-item>
+                <ion-label>{{ translate("Create login credentials") }}</ion-label>
+                <ion-toggle v-model="createLoginCreds" slot="end" />
+              </ion-item>
+              <template v-if="createLoginCreds">
+                <ion-item>
+                  <ion-label position="floating">
+                    {{ translate('Username') }} <ion-text color="danger">*</ion-text>
+                  </ion-label>
+                  <ion-input v-model="username" />
+                </ion-item>
+                <ion-item ref="password">
+                  <ion-label position="floating">
+                    {{ translate('Password') }} <ion-text color="danger">*</ion-text>
+                  </ion-label>
+                  <ion-input v-model="password" @keyup="validatePassword" @ionBlur="markPasswordTouched" type="password"/>
+                  <ion-note slot="helper">
+                    {{ translate('Password should be at least 5 characters long, it contains at least one number, one alphabet and one special character.') }}
+                  </ion-note>
+                </ion-item>
+                </template>
+            </template>
           </ion-list>
         </ion-card>
 
@@ -190,6 +200,7 @@ export default defineComponent({
       } as any,
       createLoginCreds: false as any,
       password: '',
+      username: '',
       selectedProductStores: [] as any,
       primaryProductStoreId: ''
     }
@@ -198,13 +209,9 @@ export default defineComponent({
   async ionViewWillEnter() {
     await this.store.dispatch('facility/fetchCurrentFacility', { facilityId: this.facilityId })
     await this.store.dispatch('util/fetchProductStores')
+    this.username = this.current.facilityName
   },
   methods: {
-    async updateFulfillmentSettings(event: any, facilityGroupId: string) {
-      // Using `not` as the click event returns the current status of toggle,
-      // but on click we want to change the toggle status
-      this.fulfillmentSettings[facilityGroupId] = !event.target.checked
-    },
     async saveFulfillmentSettings() {
       const responses = []
       if (this.fulfillmentSettings.PICKUP) {
@@ -237,9 +244,13 @@ export default defineComponent({
       }
     },
     async createFacilityUser() {
+      if (!this.username) {
+        showToast(translate('Username is required.'))
+        return
+      }
       try {
         const payload = {
-          "groupName": this.current.facilityName,
+          "groupName": this.username,
           "facilityId": this.facilityId,
           "loginPassword": this.password,
           "partyTypeId": "PARTY_GROUP",

src/views/CreateFacility.vue

@@ -27,11 +27,14 @@
               </ion-label>
               <ion-input @ionBlur="setFacilityId($event)" v-model="formData.facilityName" />
             </ion-item>
-            <ion-item>
+            <ion-item ref="facilityId">
               <ion-label position="floating">
                 {{ translate('Internal ID') }}
               </ion-label>
-              <ion-input v-model="formData.facilityId" />
+              <ion-input v-model="formData.facilityId" @keyup="validateFacilityId" @ionBlur="markFacilityIdTouched" />
+              <ion-note slot="error">
+                {{ translate('Internal ID cannot be more than 20 characters.') }}
+              </ion-note>
             </ion-item>
             <ion-item>
               <ion-label position="floating">
@@ -67,6 +70,7 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonNote,
   IonPage,
   IonText,
   IonTitle,
@@ -97,6 +101,7 @@ export default defineComponent({
     IonItem,
     IonLabel,
     IonList,
+    IonNote,
     IonPage,
     IonText,
     IonTitle,
@@ -149,6 +154,11 @@ export default defineComponent({
         return
       }
 
+      if (this.formData.facilityId.length > 20) {
+        showToast(translate('Internal ID cannot be more than 20 characters.'))
+        return
+      }
+
       // In case the user does not lose focus from the facility name input
       // and click on create the button, we need to set the internal id manually
       if (!this.formData.facilityId) {
@@ -193,7 +203,21 @@ export default defineComponent({
         }
         return facilityTypesByParentTypeId
       }, {}) : this.facilityTypes
-    }
+    },
+    validateFacilityId(event: any) {
+      const value = event.target.value;
+      (this as any).$refs.facilityId.$el.classList.remove('ion-valid');
+      (this as any).$refs.facilityId.$el.classList.remove('ion-invalid');
+
+      if (value === '') return;
+
+      this.formData.facilityId.length <= 20
+        ? (this as any).$refs.facilityId.$el.classList.add('ion-valid')
+        : (this as any).$refs.facilityId.$el.classList.add('ion-invalid');
+    },
+    markFacilityIdTouched() {
+      (this as any).$refs.facilityId.$el.classList.add('ion-touched');
+    },
   },
   setup() {
     const store = useStore();

src/views/FacilityDetails.vue

@@ -158,6 +158,10 @@
               <ion-label>{{ translate("Sell Inventory Online") }}</ion-label>
               <ion-toggle :checked="current.sellOnline" slot="end" @click="updateFulfillmentSetting($event, 'FAC_GRP')"/>
             </ion-item>
+            <ion-item>
+              <ion-label>{{ translate("Allow pickup") }}</ion-label>
+              <ion-toggle :checked="current.allowPickup" slot="end" @click="updateFulfillmentSetting($event, 'PICKUP')"/>
+            </ion-item>
             <ion-item>
               <ion-label>{{ translate("Uses native fulfillment app") }}</ion-label>
               <ion-toggle :checked="current.useOMSFulfillment" slot="end" @click="updateFulfillmentSetting($event, 'OMS_FULFILLMENT')"/>
@@ -166,10 +170,6 @@
               <ion-label>{{ translate("Generate shipping labels") }}</ion-label>
               <ion-toggle :checked="current.generateShippingLabel" slot="end" @click="updateFulfillmentSetting($event, 'AUTO_SHIPPING_LABEL')"/>
             </ion-item>
-            <ion-item>
-              <ion-label>{{ translate("Allow pickup") }}</ion-label>
-              <ion-toggle :checked="current.allowPickup" slot="end" @click="updateFulfillmentSetting($event, 'PICKUP')"/>
-            </ion-item>
             <ion-item lines="full">
               <ion-label>{{ translate("Days to ship") }}</ion-label>
               <ion-input v-model="defaultDaysToShip" type="number" min="0" :placeholder="translate('days to ship')"/>

src/views/FindFacilities.vue

@@ -300,7 +300,7 @@ export default defineComponent({
             return facilityData
           })
           this.store.dispatch('facility/updateFacilities', updatedFacilities)
-          showToast(translate('Fulfillment setting updated successfully'))
+          showToast(translate(`Online inventory turned ${facility.sellOnline ? 'off' : 'on'} for`, { facilityName: facility.facilityName }))
         } else {
           throw resp.data
         }