Implemented: new Re-route fulfillment app v2 (#92)

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 }

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"
 }

src/services/OrderService.ts

@@ -1,9 +1,6 @@
 import { api } from '@/adapter';
-import store from '@/store';
 
 const getOrder = async (payload: any): Promise <any>  => {
-  let baseURL = store.getters['user/getInstanceUrl'];
-  baseURL = baseURL && baseURL.startsWith('http') ? baseURL : `https://${baseURL}.hotwax.io/api/`;
   return api({
     url: "getRerouteOrder",
     method: "post",
@@ -43,10 +40,28 @@ const getProductStoreSetting = async (payload: any): Promise<any> => {
   });
 }
 
+const getRerouteOrderFacilityChangeHistory = async (payload: any): Promise<any> => {
+  return api({
+    url: "getRerouteOrderFacilityChangeHistory",
+    method: "post",
+    data: payload
+  });
+}
+
+const releaseRerouteOrderItem = async (payload: any): Promise<any> => {
+  return api({
+    url: "releaseRerouteOrderItem",
+    method: "post",
+    data: payload
+  });
+}
+
 export const OrderService = {
   getOrder,
+  getRerouteOrderFacilityChangeHistory,
   updateShippingAddress,
   updatePickupFacility,
   cancelOrderItem,
-  getProductStoreSetting
+  getProductStoreSetting,
+  releaseRerouteOrderItem
 }

src/store/modules/user/UserState.ts

@@ -4,4 +4,5 @@ export default interface UserState {
     instanceUrl: string;
     deliveryMethod: string;
     permissions: any;
+    isSplitEnabled: boolean;
 }

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)

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;

src/store/modules/user/index.ts

@@ -13,6 +13,7 @@ const userModule: Module<UserState, RootState> = {
       instanceUrl: '',
       deliveryMethod: '',
       permissions: [],
+      isSplitEnabled: false
     },
     getters,
     actions,

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'

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;

src/theme/variables.css

@@ -233,4 +233,13 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-card-background: #1e1e1e;
   }
+}
+
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
 }

src/views/AddressModal.vue

@@ -1,40 +1,47 @@
 <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-item>
-      <ion-item>
-        <ion-input :label="$t('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-item>
-      <ion-item>
-        <ion-input :label="$t('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-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-item>
-    </ion-list>
-    <div class="ion-text-center">
-      <ion-button @click="updateAddress()">{{ $t("Save shipping address") }}</ion-button>
+    <div v-if="isLoading" class="empty-state">
+      <ion-spinner name="crescent" />
+      <ion-label>{{ translate("Loading address.") }}</ion-label>
     </div>
+    <template v-else>
+      <ion-list>
+        <ion-item>
+          <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="translate('Last name')" class="ion-text-right" name="lastName" v-model="address.lastName" id="lastName" type="text"/>
+        </ion-item>
+        <ion-item>
+          <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="translate('City')" class="ion-text-right" name="city" v-model="address.city" id="city" type="text"/>
+        </ion-item>
+        <ion-item>
+          <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="translate('Zipcode')" class="ion-text-right" name="zipcode" v-model="address.postalCode" id="postalCode"/>
+        </ion-item>
+      </ion-list>
+      <div class="ion-text-center ion-margin">
+        <ion-button @click="updateAddress()">{{ translate("Save shipping address") }}</ion-button>
+      </div>
+    </template>
   </ion-content>
 </template>
 
@@ -47,17 +54,17 @@ import {
   IonIcon, 
   IonItem, 
   IonInput,
+  IonLabel,
   IonList, 
   IonSelect,
   IonSelectOption,
+  IonSpinner,
   IonTitle, 
   IonToolbar, 
   modalController,
-  loadingController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { closeOutline } from 'ionicons/icons';
-import { useRouter } from "vue-router";
 import { useStore } from "@/store";
 import { translate } from '@/i18n';
 import { hasError, showToast } from '@/utils';
@@ -73,9 +80,11 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonInput,
+    IonLabel,
     IonList,
     IonSelect,
     IonSelectOption,
+    IonSpinner,
     IonTitle,
     IonToolbar
   },
@@ -92,15 +101,15 @@ export default defineComponent({
       } as any,
       contactMechId: '',
       states: [] as any,
-      loader: null as any
+      isLoading: false
     };
   },
-  props: ["shipGroup", "token"],
+  props: ["shipGroup", "token", "updatedAddress"],
   async mounted() {
-    this.presentLoader()
+    this.isLoading = true;
     await this.getAssociatedStates()
-    if (this.shipGroup.shipmentMethodTypeId != 'STOREPICKUP') this.prepareAddress();
-    this.dismissLoader()
+    this.prepareAddress();
+    this.isLoading = false;
   },
   methods: {
     async updateAddress() {
@@ -113,11 +122,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.address1) {
+        this.address = this.updatedAddress
         return;
       }
 
@@ -149,27 +158,17 @@ export default defineComponent({
       }
     },
 
-    close(address?: any) {
-      modalController.dismiss({ dismissed: true }, address);
-    },
-    async presentLoader() {
-      this.loader = await loadingController
-        .create({
-          message: this.$t("Fetching address")
-        });
-      await this.loader.present();
-    },
-    dismissLoader() {
-      if (this.loader) {
-        this.loader.dismiss();
-        this.loader = null;
-      }
+    closeModal(address?: any) {
+      modalController.dismiss({ dismissed: true, updatedAddress: address });
     },
   },
   setup() {
-    const router = useRouter();
     const store = useStore();
-    return { closeOutline, router, store };
+    return {
+      closeOutline,
+      store,
+      translate
+    };
   }
 });
 </script>