WIP: Implemented: Added order detail page with the delivery detail (#312).

src/authorization/Rules.ts

@@ -1,4 +1,5 @@
 export default {
+    "APP_ORDER_DETAILS_VIEW": "",
     "APP_OPEN_ORDERS_VIEW": "",
     "APP_IN_PROGRESS_ORDERS_VIEW": "",
     "APP_COMPLETED_ORDERS_VIEW": "",

src/components/OrderActionsPopover.vue

@@ -10,6 +10,10 @@
         <ion-icon slot="end" :icon="bagCheckOutline" />
         {{ translate("Pick order") }}
       </ion-item>
+      <ion-item button lines="none" @click="viewOrder">
+        <ion-icon slot="end" :icon="arrowForwardOutline" />
+        {{ translate("Order details") }}
+      </ion-item>
     </ion-list>
   </ion-content>
 </template>
@@ -25,10 +29,12 @@ import {
   popoverController,
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { bagCheckOutline, copyOutline } from 'ionicons/icons'
+import { arrowForwardOutline, bagCheckOutline, copyOutline } from 'ionicons/icons'
 import { copyToClipboard } from "@/utils";
 import AssignPickerModal from '@/views/AssignPickerModal.vue';
 import { translate } from "@hotwax/dxp-components";
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex';
 
 export default defineComponent({
   name: "OrderActionsPopover",
@@ -62,13 +68,27 @@ export default defineComponent({
 
       return assignPickerModal.present();
     },
+    async viewOrder() {
+      await this.store.dispatch('order/setCurrentOrder', { order: this.order }).then(() => {
+        if (this.order) {
+          this.closePopover();
+          this.router.push({ path: `/orders/${this.order.orderId}` });
+        }
+      });
+    }
   },
   setup() {
+    const router = useRouter();
+    const store = useStore();
+
     return {
+      arrowForwardOutline,
       bagCheckOutline,
       copyOutline,
       copyToClipboard,
-      translate
+      translate,
+      router,
+      store
     }
   }
 });

src/locales/en.json

@@ -43,6 +43,7 @@
   "Customer letter": "Customer letter",
   "Damaged": "Damaged",
   "Define custom label for": "Define custom label for {field}",
+  "Destination": "Destination",
   "Dismiss": "Dismiss",
   "Delete": "Delete",
   "Delete mapping": "Delete mapping",
@@ -98,6 +99,7 @@
   "Generate shipping label": "Generate shipping label",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
+  "Handling Instructions": "Handling Instructions",
   "is identified as unfulfillable. other containing this product will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable.  { space } { orders } other { orderText } containing this product will be unassigned from this store and sent to be rebrokered.",
   "is identified as unfulfillable. This order item will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable. { space } This order item will be unassigned from this store and sent to be rebrokered.",
   "is identified as. This order item will be unassigned from the store and sent to be rebrokered.": "{ productName } is identified as { rejectReason }. This order item will be unassigned from the store and sent to be rebrokered.",
@@ -124,6 +126,7 @@
   "Mismatch": "Mismatch",
   "Next day": "Next day",
   "New mapping": "New mapping",
+  "No carrier error": "No carrier error",
   "No data available!": "No data available!",
   "No data Found.": "No data Found.",
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. {space}To add a fulfillment capacity to this facility, use the custom option.",

src/locales/es.json

@@ -43,6 +43,7 @@
   "Customer letter": "Carta al Cliente",
   "Damaged": "Dañado",
   "Define custom label for": "Definir etiqueta personalizada para {field}",
+  "Destination": "Destination",
   "Dismiss": "Dismiss",
   "Delete": "Delete",
   "Delete mapping": "Delete mapping",
@@ -98,6 +99,7 @@
   "Generate shipping label": "Generate shipping label",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
+  "Handling Instructions": "Handling Instructions",
   "is identified as unfulfillable. other containing this product will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable.  { space } { orders } other { orderText } containing this product will be unassigned from this store and sent to be rebrokered.",
   "is identified as unfulfillable. This order item will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable. { space } This order item will be unassigned from this store and sent to be rebrokered.",
   "is identified as. This order item will be unassigned from the store and sent to be rebrokered.": "{ productName } is identified as { rejectReason }. This order item will be unassigned from the store and sent to be rebrokered.",
@@ -126,6 +128,7 @@
   "Next day": "Día siguiente",
   "No Capacity": "No Capacity",
   "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. To add a fulfillment capacity to this facility, use the custom option.": "No capacity sets the fulfillment capacity to 0, preventing any new orders from being allocated to this facility. Use the \"Reject all orders\" option in the fulfillment pages to clear your facilities fulfillment queue. {space}To add a fulfillment capacity to this facility, use the custom option.",
+  "No carrier error": "No carrier error",
   "No data available!": "No data available!",
   "No data Found.": "No data Found.",
   "No new file upload. Please try again": "No se cargó ningún archivo nuevo. Por favor, inténtalo nuevamente.",

src/router/index.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 import Completed from '@/views/Completed.vue'
 import InProgress from '@/views/InProgress.vue'
 import OpenOrders from "@/views/OpenOrders.vue"
+import OrderDetails from "@/views/OrderDetails.vue"
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import Exim from "@/views/Exim.vue"
@@ -75,6 +76,15 @@ const routes: Array<RouteRecordRaw> = [
       permissionId: "APP_COMPLETED_ORDERS_VIEW"
     }
   },
+  {
+    path: '/orders/:id',
+    name: 'Order details',
+    component: OrderDetails,
+    beforeEnter: authGuard,
+    meta: {
+      permissionId: "APP_ORDER_DETAILS_VIEW"
+    }
+  },
   {
     path: "/exim",
     name: "EXIM",

src/services/OrderService.ts

@@ -100,6 +100,68 @@ const updateOrder = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchOrderItemShipGroup = async (order: any): Promise<any> => {
+  let shipGroup = {};
+
+  const params = {
+    "entityName": "OrderItemShipGroup",
+    "inputFields": {
+      "orderId": order.orderId,
+      "shipGroupSeqId": order.items[0].shipGroupSeqId,
+    },
+    "fieldList": ["orderId", "shipGroupSeqId", "facilityId", "shipmentMethodTypeId", "contactMechId"],
+    "distinct": "Y"
+  }
+
+  try {
+    const resp = await api({
+      url: "performFind",
+      method: "get",
+      params
+    })
+
+    if (!hasError(resp)) {
+      shipGroup = resp?.data.docs[0];
+    } else if (!resp?.data.error || (resp.data.error && resp.data.error !== "No record found")) {
+      return Promise.reject(resp?.data.error);
+    }
+  } catch (err) {
+    logger.error('Failed to fetch shipments for orders', err)
+  }
+
+  return shipGroup;
+}
+
+const fetchShippingAddress = async (contactMechId: string): Promise<any> => {
+  let shippingAddress = {};
+
+  const params = {
+    "entityName": "PostalAddressAndGeo",
+    "inputFields": {
+      "contactMechId": contactMechId,
+    },
+  }
+
+  try {
+    const resp = await api({
+      url: "performFind",
+      method: "get",
+      params
+    })
+
+    if (!hasError(resp)) {
+      shippingAddress = resp?.data.docs[0];
+    } else if (!resp?.data.error || (resp.data.error && resp.data.error !== "No record found")) {
+      return Promise.reject(resp?.data.error);
+    }
+  } catch (err) {
+    logger.error('Failed to fetch shipments for orders', err)
+  }
+  console.log("==========shippingAddress==", shippingAddress);
+
+  return shippingAddress;
+}
+
 const fetchShipments = async (picklistBinIds: Array<string>, orderIds: Array<string>, originFacilityId: string, statusId = ["SHIPMENT_SHIPPED", "SHIPMENT_PACKED"]): Promise<any> => {
   let shipments = [];
 
@@ -396,5 +458,7 @@ export const OrderService = {
   shipOrder,
   unpackOrder,
   updateOrder,
-  fetchShipmentLabelError
+  fetchShipmentLabelError,
+  fetchOrderItemShipGroup,
+  fetchShippingAddress
 }

src/store/modules/order/OrderState.ts

@@ -1,4 +1,5 @@
 export default interface OrderState {
+  current: any,
   open: {
     list: any,
     total: number,

src/store/modules/order/actions.ts

@@ -275,7 +275,8 @@ const actions: ActionTree<OrderState, RootState> = {
             picklistBinId: orderItem.picklistBinId,
             items: order.doclist.docs,
             shipmentMethodTypeId: orderItem.shipmentMethodTypeId,
-            shipmentMethodTypeDesc: orderItem.shipmentMethodTypeDesc
+            shipmentMethodTypeDesc: orderItem.shipmentMethodTypeDesc,
+            shippingInstructions: orderItem.shippingInstructions
           }
         })
       } else {
@@ -366,6 +367,7 @@ const actions: ActionTree<OrderState, RootState> = {
             items: order.doclist.docs,
             shipmentMethodTypeId: orderItem.shipmentMethodTypeId,
             shipmentMethodTypeDesc: orderItem.shipmentMethodTypeDesc,
+            shippingInstructions: orderItem.shippingInstructions,
             reservedDatetime: orderItem.reservedDatetime
           }
         })
@@ -451,6 +453,7 @@ const actions: ActionTree<OrderState, RootState> = {
         shipmentId: orderItem.shipmentId,
         shipmentMethodTypeId: orderItem.shipmentMethodTypeId,
         shipmentMethodTypeDesc: orderItem.shipmentMethodTypeDesc,
+        shippingInstructions: orderItem.shippingInstructions,
         isGeneratingShippingLabel: false,
         isGeneratingPackingSlip: false
       }
@@ -470,6 +473,28 @@ const actions: ActionTree<OrderState, RootState> = {
     return resp;
   },
 
+  async setCurrentOrder ({ commit }, { order }) {
+    let resp;
+
+    try {
+      resp = await OrderService.fetchOrderItemShipGroup(order);
+      if (resp) {
+        const contactMechId = resp.contactMechId;
+
+        resp = await OrderService.fetchShippingAddress(contactMechId);
+        if (resp) {
+          order = {
+            ...order,
+            shippingAddress: resp
+          }  
+        }
+      }
+    } catch (err: any) {
+      logger.error("Error in setting current order", err);
+    }
+    commit(types.ORDER_CURRENT_UPDATED, order)
+  },
+
   async clearOrders ({ commit }) {
     commit(types.ORDER_INPROGRESS_CLEARED)
     commit(types.ORDER_OPEN_CLEARED)

src/store/modules/order/getters.ts

@@ -11,6 +11,9 @@ const getters: GetterTree<OrderState, RootState> = {
   },
   getCompletedOrders (state) {
     return state.completed;
+  },
+  getCurrentOrder (state) {
+    return state.current;
   }
 };
 export default getters;

src/store/modules/order/index.ts

@@ -8,6 +8,7 @@ import RootState from '../../RootState'
 const orderModule: Module<OrderState, RootState> = {
   namespaced: true,
   state: {
+    current: {},
     open: {
       list: [],
       total: 0,

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

@@ -8,3 +8,4 @@ export const ORDER_INPROGRESS_CLEARED = SN_ORDER + '/INPROGRESS_CLEARED'
 export const ORDER_COMPLETED_UPDATED = SN_ORDER + '/COMPLETED_UPDATED'
 export const ORDER_COMPLETED_QUERY_UPDATED = SN_ORDER + '/COMPLETED_QUERY_UPDATED'
 export const ORDER_COMPLETED_CLEARED = SN_ORDER + '/COMPLETED_CLEARED'
+export const ORDER_CURRENT_UPDATED = SN_ORDER + '/CURRENT_UPDATED'

src/store/modules/order/mutations.ts

@@ -3,6 +3,9 @@ import OrderState from './OrderState'
 import * as types from './mutation-types'
 
 const mutations: MutationTree <OrderState> = {
+  [types.ORDER_CURRENT_UPDATED] (state, payload) {
+    state.current = payload;
+  },
   [types.ORDER_OPEN_UPDATED] (state, payload) {
     state.open.list = payload.list;
     state.open.total = payload.total;

src/views/Completed.vue

@@ -53,7 +53,7 @@
               </div>
 
               <div class="order-tags">
-                <ion-chip @click="copyToClipboard(order.orderName, 'Copied to clipboard')" outline>
+                <ion-chip @click.stop="orderActionsPopover(order, $event)" outline>
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ order.orderName }}</ion-label>
                 </ion-chip>
@@ -184,6 +184,7 @@ import { OrderService } from '@/services/OrderService';
 import logger from '@/logger';
 import ShippingLabelErrorModal from '@/components/ShippingLabelErrorModal.vue';
 import { Actions, hasPermission } from '@/authorization'
+import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
 
 export default defineComponent({
   name: 'Home',
@@ -386,6 +387,15 @@ export default defineComponent({
       });
       return popover.present();
     },
+    async orderActionsPopover(order: any, ev: Event) {
+      const popover = await popoverController.create({
+        component: OrderActionsPopover,
+        componentProps: { order },
+        showBackdrop: false,
+        event: ev
+      });
+      return popover.present();
+    },
 
     async fetchShipmentMethods() {
       const payload = prepareOrderQuery({

src/views/InProgress.vue

@@ -56,7 +56,7 @@
               </div>
 
               <div class="order-tags">
-                <ion-chip @click="copyToClipboard(order.orderName, 'Copied to clipboard')" outline>
+                <ion-chip @click.stop="orderActionsPopover(order, $event)" outline>
                   <ion-icon :icon="pricetagOutline" />
                   <ion-label>{{ order.orderName }}</ion-label>
                 </ion-chip>
@@ -262,6 +262,7 @@ import { UserService } from '@/services/UserService';
 import { Actions, hasPermission } from '@/authorization'
 import EditPickersModal from '@/components/EditPickersModal.vue';
 import ShipmentBoxTypePopover from '@/components/ShipmentBoxTypePopover.vue'
+import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
 
 export default defineComponent({
   name: 'InProgress',
@@ -347,6 +348,15 @@ export default defineComponent({
       }
       await this.store.dispatch('order/updateInProgressOrder', order)
     },
+    async orderActionsPopover(order: any, ev: Event) {
+      const popover = await popoverController.create({
+        component: OrderActionsPopover,
+        componentProps: { order },
+        showBackdrop: false,
+        event: ev
+      });
+      return popover.present();
+    },
     async packagingPopover(ev: Event) {
       const popover = await popoverController.create({
         component: Popover,

src/views/OrderDetails.vue

@@ -0,0 +1,19 @@
+<template>
+    <ion-page>
+        <ShippingDetails />
+    </ion-page>
+  </template>
+
+<script lang="ts">
+  import { IonPage } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import ShippingDetails from '@/views/ShippingDetails.vue';
+
+  export default defineComponent({
+    name: 'OrderDetails',
+    components: {
+        IonPage,
+        ShippingDetails
+    }
+  });
+</script>