Implemented: support for print picklist in open orders (#415)

src/locales/en.json

@@ -128,6 +128,7 @@
   "Pick up location": "Pick up location",
   "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
   "pieces in stock": "pieces in stock",
+  "Print picklists": "Print picklists",
   "Product details": "Product details",
   "Product not found": "Product not found",
   "Products not found": "Products not found",

src/locales/es.json

@@ -125,6 +125,7 @@
   "Pick up location": "Ubicación de recogida",
   "Pickers successfully replaced in the picklist with the new selections.": "Los recolectores fueron reemplazados exitosamente en la lista de selección con las nuevas selecciones.",
   "pieces in stock": "piezas en inventario",
+  "Print picklists": "Print picklists",
   "Product details": "Detalles del producto",
   "Product not found": "Producto no encontrado",
   "Products not found": "Productos no encontrados",

src/locales/ja.json

@@ -124,6 +124,7 @@
   "Pick up location": "受取場所",
   "Pickers successfully replaced in the picklist with the new selections.": "ピッカーは新しい選択によりピックリストで正常に置き換えられました。",
   "pieces in stock": "在庫あり",
+  "Print picklists": "Print picklists",
   "Product details": "商品詳細",
   "Product not found": "商品が見つかりません",
   "Products not found": "商品が見つかりません",

src/services/OrderService.ts

@@ -4,6 +4,7 @@ import { translate } from '@hotwax/dxp-components';
 import store from '@/store';
 import { formatPhoneNumber, showToast } from '@/utils';
 import logger from '@/logger';
+import { cogOutline } from 'ionicons/icons';
 
 const getOpenOrders = async (payload: any): Promise <any> => {
   return api({
@@ -120,6 +121,37 @@ const createPicklist = async (query: any): Promise <any> => {
   })
 }
 
+const printPicklist = async (picklistId: string): Promise<any> => {
+  try {
+    // Get picklist from the server
+    const resp: any = await api({
+      method: 'get',
+      url: 'PrintPicklist.pdf',
+      params: {
+        picklistId
+      },
+      responseType: "blob"
+    })
+
+    if (!resp || resp.status !== 200 || hasError(resp)) {
+      throw resp.data;
+    }
+
+    // Generate local file URL for the blob received
+    const pdfUrl = window.URL.createObjectURL(resp.data);
+    // Open the file in new tab
+    try {
+      (window as any).open(pdfUrl, "_blank").focus();
+    }
+    catch {
+      showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'picklist'}), { icon: cogOutline });
+    }
+  } catch (err) {
+    showToast(translate('Failed to print picklist'))
+    logger.error("Failed to print picklist", err)
+  }
+}
+
 const sendPickupScheduledNotification = async (payload: any): Promise <any> => {
   return api({
     url: "service/sendPickupScheduledNotification",
@@ -307,6 +339,14 @@ const fetchTrackingCodes = async (shipmentIds: Array<string>): Promise<any> => {
   return shipmentTrackingCodes;
 }
 
+const packOrder = async (payload: any): Promise<any> => {
+  return api({
+    url: "/service/packStoreFulfillmentOrder",
+    method: "post",
+    data: payload
+  })
+}
+
 export const OrderService = {
   fetchOrderItems,
   fetchOrderPaymentPreferences,
@@ -327,5 +367,7 @@ export const OrderService = {
   getShipmentItems,
   getCustomerContactDetails,
   getShippingPhoneNumber,
+  packOrder,
+  printPicklist,
   printShippingLabelAndPackingSlip
 }

src/store/modules/order/actions.ts

@@ -115,7 +115,7 @@
     const orderQueryPayload = prepareOrderQuery({
       ...payload,
       shipmentMethodTypeId: !store.state.user.preference.showShippingOrders ? 'STOREPICKUP' : '',
-      '-shipmentStatusId': '*',
+      '-shipmentStatusId': '(SHIPMENT_PACKED OR SHIPMENT_SHIPPED)',
       '-fulfillmentStatus': '(Cancelled OR Rejected)',
       orderStatusId: 'ORDER_APPROVED',
       orderTypeId: 'SALES_ORDER'
@@ -170,7 +170,10 @@
             }, []),
             placedDate: orderItem.orderDate,
             shippingInstructions: orderItem.shippingInstructions,
-            shipGroupSeqId: orderItem.shipGroupSeqId
+            shipGroupSeqId: orderItem.shipGroupSeqId,
+            isPicked: orderItem.isPicked,
+            picklistId: orderItem.picklistId,
+            picklistBinId: orderItem.picklistBinId
           }
         })
 
@@ -527,7 +530,7 @@
     return resp;
   },
 
   async packDeliveryItems ({ commit }, shipmentId) {
     const params = {
       shipmentId: shipmentId,
       statusId: 'SHIPMENT_PACKED'
@@ -538,7 +541,7 @@
   async packShipGroupItems ({ state, dispatch, commit }, payload) {
     emitter.emit("presentLoader")
 
-    if (store.state.user.preference.configurePicker) {
+    if (store.state.user.preference.configurePicker && payload.order.isPicked !== 'Y') {
       let resp;
 
       const items = payload.order.parts[0].items;
@@ -547,6 +550,7 @@
       items.map((item: any, index: number) => {
         formData.append("itemStatusId_o_"+index, "PICKITEM_PENDING")
         formData.append("pickerIds_o_"+index, payload.selectedPicker)
+        formData.append("picked_o_"+index, item.quantity)
         Object.keys(item).map((property) => {
           if(property !== "facilityId") formData.append(property+'_o_'+index, item[property])
         })
@@ -589,7 +593,7 @@
         const shipmentMethodTypeId = payload.part?.shipmentMethodEnum?.shipmentMethodEnumId
         if (shipmentMethodTypeId !== 'STOREPICKUP') {
           // TODO: find a better way to get the shipmentId
-          const shipmentId = resp.data._EVENT_MESSAGE_.match(/\d+/g)[0]
+          const shipmentId = resp.data.shipmentId ? resp.data.shipmentId : resp.data._EVENT_MESSAGE_.match(/\d+/g)[0]
           await dispatch('packDeliveryItems', shipmentId).then((data) => {
             if (!hasError(data) && !data.data._EVENT_MESSAGE_) {
               showToast(translate("Something went wrong"))
@@ -606,7 +610,19 @@
               }
             }
           })
+        } else {
+          // Remove order from the list if action is successful
+          const orderIndex = state.open.list.findIndex((order: any) => {
+            return order.orderId === payload.order.orderId && order.parts.some((part: any) => {
+              return part.orderPartSeqId === payload.part.orderPartSeqId;
+            });
+          });
+          if (orderIndex > -1) {
+            state.open.list.splice(orderIndex, 1);
+            commit(types.ORDER_OPEN_UPDATED, { orders: state.open.list, total: state.open.total -1 })
+          }
         }
+
         // Adding readyToHandover or readyToShip because we need to show the user that the order has moved to the packed tab
         if(payload.order.part.shipmentMethodEnum.shipmentMethodEnumId === 'STOREPICKUP'){
           payload.order = { ...payload.order, readyToHandover: true }
@@ -643,7 +659,7 @@
     }).catch(err => err);
   },
 
   async rejectOrderItems ({ commit }, order) {
     const payload = {
       'orderId': order.orderId
     }
@@ -963,6 +979,10 @@
     emitter.emit("dismissLoader");
   },
 
+  updateOpenOrder ({ commit }, payload) {
+    commit(types.ORDER_OPEN_UPDATED, {orders: payload.orders , total: payload.total})
+  },
+
   // clearning the orders state when logout, or user store is changed
   clearOrders ({ commit }) {
     commit(types.ORDER_OPEN_UPDATED, {orders: {} , total: 0})
@@ -1049,7 +1069,7 @@
 
     const orderQueryPayload = prepareOrderQuery(params)
 
     let resp, total, shipGroups = [];
     const facilityTypeIds: Array<string> = [];
 
     try {

src/store/modules/user/getters.ts

@@ -30,6 +30,9 @@ const getters: GetterTree <UserState, RootState> = {
     showShippingOrders (state) {
         return state.preference.showShippingOrders;
     },
+    printPicklistPref (state) {
+        return state.preference.printPicklistPref;
+    },
     configurePicker (state) {
         return state.preference.configurePicker;
     },

src/store/modules/user/index.ts

@@ -15,7 +15,8 @@ const userModule: Module<UserState, RootState> = {
       preference: {
         showShippingOrders: false,
         showPackingSlip: false,
-        configurePicker: false
+        configurePicker: false,
+        printPicklistPref: false
       },
       currentEComStore: {},
       partialOrderRejectionConfig: {},

src/store/modules/user/mutations.ts

@@ -14,7 +14,8 @@ const mutations: MutationTree <UserState> = {
       state.preference= {
         showShippingOrders: false,
         showPackingSlip: false,
-        configurePicker: false
+        configurePicker: false,
+        printPicklistPref: false
       },
       state.allNotificationPrefs = []
     },

src/utils/index.ts

@@ -5,14 +5,30 @@ import { DateTime } from "luxon";
 
 // TODO Use separate files for specific utilities
 
-const showToast = async (message: string) => {
-  const toast = await toastController
-    .create({
-      message,
-      duration: 3000,
-      position: 'top',
-    })
-  return toast.present();
+const showToast = async (message: string, options?: any) => {
+  const config = {
+    message,
+    ...options
+  } as any;
+
+  if (!options?.position) {
+    config.position = 'top';
+  }
+  if (options?.canDismiss) {
+    config.buttons = [
+      {
+        text: translate('Dismiss'),
+        role: 'cancel',
+      },
+    ]
+  }
+  if (!options?.manualDismiss) {
+    config.duration = 3000;
+  }
+
+  const toast = await toastController.create(config)
+  // present toast if manual dismiss is not needed
+  return !options?.manualDismiss ? toast.present() : toast
 }
 
 const copyToClipboard = async (text: any, showCopiedValue = true) => {

src/views/AssignPickerModal.vue

@@ -124,8 +124,7 @@ export default defineComponent({
     },
     readyForPickup () {
       if (this.selectedPicker) {
-        this.store.dispatch('order/packShipGroupItems', { order: this.order, part: this.part, facilityId: this.facilityId, selectedPicker: this.selectedPicker })
-        modalController.dismiss({ dismissed: true });
+        modalController.dismiss({ dismissed: true, selectedPicker: this.selectedPicker });
       } else {
         showToast(translate('Select a picker'))
       }

src/views/OrderDetail.vue

@@ -336,6 +336,13 @@ export default defineComponent({
         component: AssignPickerModal,
         componentProps: { order, part, facilityId }
       });
+
+      assignPickerModal.onDidDismiss().then(async(result: any) => {
+        if(result.data.dismissed) {
+          await this.store.dispatch('order/packShipGroupItems', { order, part, facilityId, selectedPicker: result.data.selectedPicker })
+        }
+      })
+
       return assignPickerModal.present();
     },
     async editPicker(order: any) {