Implemented: new UI of the Reroute fulfillment app (hotwax#92)

amansinghbais · Sep 17, 2024 · 2c4651c · 2c4651c
1 parent 4739973
commit 2c4651c
Show file tree

Hide file tree

Showing 13 changed files with 1,100 additions and 400 deletions.
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -19,11 +19,11 @@ const i18n = createI18n({
   messages: loadLocaleMessages()
 })
 
-const translate = (key: string) => {
+const translate = (key: string, named?: any) => {
   if (!key) {
     return '';
   }
-  return i18n.global.t(key);
+  return i18n.global.t(key, named);
 };
 
 export { i18n as default, translate }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -48,6 +48,7 @@
   "Street": "Street",
   "Tracking code": "Tracking code",
   "Username": "Username",
+  "was unable to prepare your order. Please select alternate options.": "{facilityName} was unable to prepare your order. Please select alternate options.",
   "Your Order": "Your Order",
   "Zipcode": "Zipcode"
 }
diff --git a/src/services/OrderService.ts b/src/services/OrderService.ts
@@ -1,5 +1,6 @@
-import { api } from '@/adapter';
+import { api, client } from '@/adapter';
 import store from '@/store';
+import { hasError } from '@hotwax/oms-api';
 
 const getOrder = async (payload: any): Promise <any>  => {
   let baseURL = store.getters['user/getInstanceUrl'];
@@ -43,7 +44,91 @@ const getProductStoreSetting = async (payload: any): Promise<any> => {
   });
 }
 
+const fetchOrderFacilityChangeHistory = async (payload: any): Promise<any> => {
+  let baseURL = store.getters['user/getInstanceUrl'];
+  baseURL = baseURL && baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
+
+
+  return client({
+    url: "performFind",
+    method: "POST",
+    data: payload,
+    baseURL,
+    headers: {
+      Authorization: 'Bearer ' + process.env.VUE_APP_BASE,
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+const fetchCustomerSavedAddress = async (orderId: any): Promise<any> => {
+  let baseURL = store.getters['user/getInstanceUrl'];
+  baseURL = baseURL && baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
+
+  let resp, contactMechId, address;
+  let params = {
+    entityName: "OrderContactMech",
+    inputFields: {
+      orderId: orderId,
+      contactMechPurposeTypeId: "SHIPPING_LOCATION"
+    },
+    fieldList: ["orderId", "contactMechId"],
+    viewSize: 1
+  } as any;
+
+  try {
+    resp = await client({
+      url: "performFind",
+      method: "POST",
+      data: params,
+      baseURL,
+      headers: {
+        Authorization: 'Bearer ' + process.env.VUE_APP_BASE,
+        'Content-Type': 'application/json'
+      }
+    })
+
+    if(!hasError(resp)) {
+      contactMechId = resp.data.docs[0]?.contactMechId;
+
+      params = {
+        entityName: "PostalAddress",
+        inputFields: {
+          contactMechId
+        },
+        viewSize: 1
+      };
+
+      resp = await client({
+        url: "performFind",
+        method: "POST",
+        data: params,
+        baseURL,
+        headers: {
+          Authorization: 'Bearer ' + process.env.VUE_APP_BASE,
+          'Content-Type': 'application/json'
+        }
+      })
+
+      if(!hasError(resp)) {
+        address = resp.data.docs[0]
+      } else {
+        throw resp.data;
+      }
+    } else {
+      throw resp.data;
+    }
+  } catch(error: any) {
+    console.error(error);
+  }
+
+  return address;
+}
+
+
 export const OrderService = {
+  fetchCustomerSavedAddress,
+  fetchOrderFacilityChangeHistory,
   getOrder,
   updateShippingAddress,
   updatePickupFacility,

diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
@@ -4,4 +4,5 @@ export default interface UserState {
     instanceUrl: string;
     deliveryMethod: string;
     permissions: any;
+    isSplitEnabled: boolean;
 }
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
@@ -120,18 +120,20 @@ const actions: ActionTree<UserState, RootState> = {
         token,
         inputFields: {
           productStoreId,
-          "settingTypeEnumId": ["CUST_DLVRMTHD_UPDATE", "CUST_DLVRADR_UPDATE", "CUST_PCKUP_UPDATE", "CUST_ALLOW_CNCL", "RF_SHIPPING_METHOD"],
+          "settingTypeEnumId": ["CUST_DLVRMTHD_UPDATE", "CUST_DLVRADR_UPDATE", "CUST_PCKUP_UPDATE", "CUST_ALLOW_CNCL", "RF_SHIPPING_METHOD", "CUST_ORD_ITEM_SPLIT"],
           "settingTypeEnumId_op": "in"
         },
         viewSize: 100
       })
       if (!hasError(resp)) {
         const permissions = resp.data.docs.filter((permission: any) => permission.settingValue == 'true').map((permission: any) => permission.settingTypeEnumId)
         const deliveryMethod = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'RF_SHIPPING_METHOD')?.settingValue
+        const isSplitEnabled = resp.data.docs.find((permission: any) => permission.settingTypeEnumId === 'CUST_ORD_ITEM_SPLIT')?.settingValue
         const appPermissions = prepareAppPermissions(permissions);
         setPermissions(appPermissions);
         commit(types.USER_DELIVERY_METHOD_UPDATED, deliveryMethod ? deliveryMethod : "STANDARD");
         commit(types.USER_PERMISSIONS_UPDATED, appPermissions);
+        commit(types.USER_ORDER_SPLIT_CONFIG_UPDATED, isSplitEnabled === "true");
       }
     } catch (error) {
       console.error(error)

diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
@@ -24,6 +24,9 @@ const getters: GetterTree <UserState, RootState> = {
     },
     getUserPermissions (state) {
         return state.permissions;
+    },
+    isSplitEnabled (state) {
+        return state.isSplitEnabled;
     }
 }
 export default getters;
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
@@ -13,6 +13,7 @@ const userModule: Module<UserState, RootState> = {
       instanceUrl: '',
       deliveryMethod: '',
       permissions: [],
+      isSplitEnabled: false
     },
     getters,
     actions,

diff --git a/src/store/modules/user/mutation-types.ts b/src/store/modules/user/mutation-types.ts
@@ -5,3 +5,4 @@ export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_DELIVERY_METHOD_UPDATED = SN_USER + '/DELIVERY_METHOD_UPDATED'
+export const USER_ORDER_SPLIT_CONFIG_UPDATED = SN_USER + '/ORDER_SPLIT_CONFIG_UPDATED'
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
@@ -22,6 +22,9 @@ const mutations: MutationTree <UserState> = {
     },
     [types.USER_DELIVERY_METHOD_UPDATED] (state, payload) {
         state.deliveryMethod = payload
+    },
+    [types.USER_ORDER_SPLIT_CONFIG_UPDATED] (state, payload) {
+        state.isSplitEnabled = payload
     }
 }
 export default mutations;
diff --git a/src/views/AddressModal.vue b/src/views/AddressModal.vue
@@ -1,39 +1,39 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-title>{{ $t("Shipping address") }}</ion-title>
-      <ion-buttons slot="end" @click="close()">
+      <ion-buttons slot="start" @click="closeModal()">
         <ion-button>
           <ion-icon :icon="closeOutline" />
         </ion-button>
       </ion-buttons>
+      <ion-title>{{ translate("Shipping address") }}</ion-title>
     </ion-toolbar>
   </ion-header>
   <ion-content>
     <ion-list>
       <ion-item>
-        <ion-input :label="$t('First name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
+        <ion-input :label="translate('First name')" class="ion-text-right" name="firstName" v-model="address.firstName" id="firstName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
+        <ion-input :label="translate('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Street')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
+        <ion-input :label="translate('Street')" class="ion-text-right" name="street" v-model="address.address1" id="address1" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
+        <ion-input :label="translate('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
       </ion-item>
       <ion-item>
-        <ion-select :label="$t('State')" interface="popover" v-model="address.stateProvinceGeoId">
+        <ion-select :label="translate('State')" :placeholder="translate('Select')" interface="popover" v-model="address.stateProvinceGeoId">
           <ion-select-option v-for="state in states" :key="state.geoId" :value="state.geoId" >{{ state.geoName }}</ion-select-option>
         </ion-select>
       </ion-item>
       <ion-item>
-        <ion-input :label="$t('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
+        <ion-input :label="translate('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
       </ion-item>
     </ion-list>
     <div class="ion-text-center">
-      <ion-button @click="updateAddress()">{{ $t("Save shipping address") }}</ion-button>
+      <ion-button @click="updateAddress()">{{ translate("Save shipping address") }}</ion-button>
     </div>
   </ion-content>
 </template>
@@ -95,11 +95,11 @@ export default defineComponent({
       loader: null as any
     };
   },
-  props: ["shipGroup", "token"],
+  props: ["shipGroup", "token", "updatedAddress"],
   async mounted() {
     this.presentLoader()
     await this.getAssociatedStates()
-    if (this.shipGroup.shipmentMethodTypeId != 'STOREPICKUP') this.prepareAddress();
+    this.prepareAddress();
     this.dismissLoader()
   },
   methods: {
@@ -113,11 +113,11 @@ export default defineComponent({
       // In some cases, we get a stateProvinceGeoId that does not exist in data, thus state is not displayed on the UI but originally the field has information thus toast of empty field is not displayed
       // thus added a check that if the geoCode is not found in the states fetched from the server, do not stop the address update process and pass the same state that was previously in the address.
       this.address.stateCode = state?.geoCode || this.address.stateProvinceGeoId;
-      this.close(this.address);
+      this.closeModal(this.address);
     },
     prepareAddress() {
-      if(this.shipGroup?.updatedAddress) {
-        this.address = this.shipGroup.updatedAddress
+      if(this.updatedAddress) {
+        this.address = this.updatedAddress
         return;
       }
 
@@ -149,13 +149,13 @@ export default defineComponent({
       }
     },
 
-    close(address?: any) {
-      modalController.dismiss({ dismissed: true }, address);
+    closeModal(address?: any) {
+      modalController.dismiss({ dismissed: true, updatedAddress: address });
     },
     async presentLoader() {
       this.loader = await loadingController
         .create({
-          message: this.$t("Fetching address")
+          message: this.translate("Fetching address")
         });
       await this.loader.present();
     },
@@ -169,7 +169,12 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const store = useStore();
-    return { closeOutline, router, store };
+    return {
+      closeOutline,
+      router,
+      store,
+      translate
+    };
   }
 });
 </script>