Kit UI (#463)

src/components/ProductListItem.vue

@@ -9,6 +9,11 @@
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div slot="end" v-if="!isShipToStoreOrder">
+      <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item)">
+        <ion-icon v-if="showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+        <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
+      </ion-button>
+
       <ion-spinner v-if="isFetchingStock" color="medium" name="crescent" />
       <div v-else-if="getProductStock(item.productId).quantityOnHandTotal >= 0" class="atp-info">
         <ion-note slot="end"> {{ translate("on hand", { count: getProductStock(item.productId).quantityOnHandTotal ?? '0' }) }} </ion-note>
@@ -21,24 +26,49 @@
       </ion-button>
     </div>  
   </ion-item>
+
+  <template v-if="showKitComponents && !getProduct(item.productId)?.productComponents">
+    <ion-item lines="none">
+      <ion-skeleton-text animated style="height: 80%;"/>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-skeleton-text animated style="height: 80%;"/>
+    </ion-item>
+  </template>
+  <template v-else-if="showKitComponents && getProduct(item.productId)?.productComponents">
+    <ion-card v-for="(productComponent, index) in getProduct(item.productId).productComponents" :key="index">
+      <ion-item lines="none">
+        <ion-thumbnail slot="start">
+          <DxpShopifyImg :src="getProduct(productComponent.productIdTo).mainImageUrl" size="small"/>
+        </ion-thumbnail>
+        <ion-label>
+          <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(productComponent.productIdTo)) }}</p>
+          {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(productComponent.productIdTo)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(productComponent.productIdTo)) : productComponent.productIdTo }}
+        </ion-label>
+      </ion-item>
+    </ion-card>
+  </template>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
-import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail, popoverController } from "@ionic/vue";
+import { IonButton, IonCard, IonIcon, IonItem, IonLabel, IonNote, IonSkeletonText, IonSpinner, IonThumbnail, popoverController } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
 import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components'
-import { cubeOutline, informationCircleOutline } from 'ionicons/icons'
+import { chevronUpOutline, cubeOutline, informationCircleOutline, listOutline } from 'ionicons/icons'
 import InventoryDetailsPopover from '@/components/InventoryDetailsPopover.vue'
+import { isKit } from '@/utils/order'
 
 export default defineComponent({
   name: "ProductListItem",
   components: {
     IonButton,
+    IonCard,
     IonIcon,
     IonItem,
     IonLabel,
     IonNote,
+    IonSkeletonText,
     IonSpinner,
     IonThumbnail,
     DxpShopifyImg
@@ -47,6 +77,7 @@ export default defineComponent({
     return {
       goodIdentificationTypeId: process.env.VUE_APP_PRDT_IDENT_TYPE_ID,
       isFetchingStock: false,
+      showKitComponents: false
     }
   },
   props: ['item', 'isShipToStoreOrder'],
@@ -59,6 +90,10 @@ export default defineComponent({
     })
   },
   methods: {
+    async fetchKitComponents(orderItem: any) {
+      this.store.dispatch('product/fetchProductComponents', { productId: orderItem.productId })
+      this.showKitComponents = !this.showKitComponents
+    },
     async fetchProductStock(productId: string) {
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId });
@@ -82,10 +117,13 @@ export default defineComponent({
     const productIdentificationStore = useProductIdentificationStore();
     let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
     return {
+      chevronUpOutline,
       getProductIdentificationValue,
       productIdentificationPref,
       cubeOutline,
       informationCircleOutline,
+      isKit,
+      listOutline,
       store,
       translate
     }

src/services/ProductService.ts

@@ -18,7 +18,15 @@ const findProducts = async (query: any): Promise <any>  => {
     cache: true
   });
 }
+const fetchProductComponents = async (params: any): Promise<any> => {
+  return await api({
+    url: "performFind",
+    method: "get",
+    params
+  })
+}
 export const ProductService = {
   fetchProducts,
-  findProducts
+  findProducts,
+  fetchProductComponents
 }

src/store/modules/order/actions.ts

@@ -9,7 +9,8 @@
 import emitter from '@/event-bus'
 import store from "@/store";
 import { prepareOrderQuery } from "@/utils/solrHelper";
-import { getOrderCategory } from "@/utils/order";
+import { getOrderCategory, removeKitComponents } from '@/utils/order'
+
 import logger from "@/logger";
 
 const actions: ActionTree<OrderState , RootState> ={
@@ -125,6 +126,12 @@
       resp = await OrderService.getOpenOrders(orderQueryPayload)
       if (resp.status === 200 && !hasError(resp) && resp.data.grouped?.orderId?.ngroups > 0) {
 
+        const productIds = [] as any;
+        resp.data.grouped?.orderId?.groups.forEach((order: any) => {
+          productIds.push(...order.doclist.docs.map((item: any) => item.productId));
+        });
+        await this.dispatch('product/fetchProducts', { productIds });
+
         let orders = resp.data.grouped?.orderId?.groups.map((order: any) => {
           const orderItem = order.doclist.docs[0]
           return {
@@ -135,7 +142,7 @@
               name: orderItem.customerName
             },
             statusId: orderItem.orderStatusId,
-            parts: order.doclist.docs.reduce((arr: Array<any>, item: any) => {
+            parts: removeKitComponents(order.doclist.docs.reduce((arr: Array<any>, item: any) => {
               const currentOrderPart = arr.find((orderPart: any) => orderPart.orderPartSeqId === item.shipGroupSeqId)
               if (!currentOrderPart) {
                 arr.push({
@@ -167,7 +174,7 @@
               }
 
               return arr
-            }, []),
+            }, [])),
             placedDate: orderItem.orderDate,
             shippingInstructions: orderItem.shippingInstructions,
             shipGroupSeqId: orderItem.shipGroupSeqId,
@@ -179,8 +186,6 @@
 
         const total = resp.data.grouped?.orderId?.ngroups;
 
-        this.dispatch('product/getProductInformation', { orders })
-
         if(payload.viewIndex && payload.viewIndex > 0) orders = state.open.list.concat(orders)
         commit(types.ORDER_OPEN_UPDATED, { orders, total })
         emitter.emit("dismissLoader");
@@ -217,7 +222,7 @@
     const orders = JSON.parse(JSON.stringify(state.open.list)) as any
     // As one order can have multiple parts thus checking orderId and partSeq as well before making any api call
     if(current.orderId === payload.orderId && current.orderType === orderType && current.part?.orderPartSeqId === payload.orderPartSeqId) {
-      this.dispatch('product/getProductInformation', { orders: [ current ] })
+      await this.dispatch('product/getProductInformation', { orders: [ current ] })
       await dispatch('fetchShipGroupForOrder');
       return current 
     }
@@ -253,7 +258,7 @@
               name: orderItem.customerName
             },
             statusId: orderItem.orderStatusId,
-            parts: order.doclist.docs.reduce((arr: Array<any>, item: any) => {
+            parts: removeKitComponents(order.doclist.docs.reduce((arr: Array<any>, item: any) => {
               const currentOrderPart = arr.find((orderPart: any) => orderPart.orderPartSeqId === item.shipGroupSeqId)
               if (!currentOrderPart) {
                 arr.push({
@@ -279,7 +284,7 @@
               }
 
               return arr
-            }, []),
+            }, [])),
             placedDate: orderItem.orderDate,
             shippingInstructions: orderItem.shippingInstructions,
             orderType: orderType,
@@ -344,6 +349,12 @@
     try {
       resp = await OrderService.getPackedOrders(orderQueryPayload)
       if (resp.status === 200 && resp.data.grouped?.orderId?.ngroups > 0 && !hasError(resp)) {
+        const productIds = [] as any;
+        resp.data.grouped?.orderId?.groups.forEach((order: any) => {
+          productIds.push(...order.doclist.docs.map((item: any) => item.productId));
+        });
+        await this.dispatch('product/fetchProducts', { productIds });
+
         let orders = resp?.data?.grouped?.orderId?.groups.map((order: any) => {
           const orderItem = order.doclist.docs[0]
           return {
@@ -356,7 +367,7 @@
               name: orderItem.customerName,
             },
             statusId: orderItem.orderStatusId,
-            parts: order.doclist.docs.reduce((arr: Array<any>, item: any) => {
+            parts: removeKitComponents(order.doclist.docs.reduce((arr: Array<any>, item: any) => {
               const currentOrderPart = arr.find((orderPart: any) => orderPart.orderPartSeqId === item.shipGroupSeqId)
               if (!currentOrderPart) {
                 arr.push({
@@ -380,7 +391,7 @@
               }
 
               return arr
-            }, []),
+            }, [])),
             placedDate: orderItem.orderDate,
             shippingInstructions: orderItem.shippingInstructions,
             pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
@@ -395,7 +406,6 @@
             shipGroupSeqId: orderItem.shipGroupSeqId
           }
         })
-        this.dispatch('product/getProductInformation', { orders });
 
         const total = resp.data.grouped?.orderId?.ngroups;
 
@@ -430,6 +440,12 @@
     try {
       resp = await OrderService.getCompletedOrders(orderQueryPayload)
       if (resp.status === 200 && resp.data.grouped?.orderId?.ngroups > 0 && !hasError(resp)) {
+        const productIds = [] as any;
+        resp.data.grouped?.orderId?.groups.forEach((order: any) => {
+          productIds.push(...order.doclist.docs.map((item: any) => item.productId));
+        });
+        await this.dispatch('product/fetchProducts', { productIds });
+
         let orders = resp?.data?.grouped?.orderId?.groups.map((order: any) => {
           const orderItem = order.doclist.docs[0]
           return {
@@ -440,7 +456,7 @@
               name: orderItem.customerPartyName,
             },
             statusId: orderItem.orderStatusId,
-            parts: order.doclist.docs.reduce((arr: Array<any>, item: any) => {
+            parts: removeKitComponents(order.doclist.docs.reduce((arr: Array<any>, item: any) => {
               const currentOrderPart = arr.find((orderPart: any) => orderPart.orderPartSeqId === item.shipGroupSeqId)
               if (!currentOrderPart) {
                 arr.push({
@@ -460,12 +476,11 @@
               }
 
               return arr
-            }, []),
+            }, [])),
             placedDate: orderItem.orderDate,
             shipGroupSeqId: orderItem.shipGroupSeqId
           }
         })
-        this.dispatch('product/getProductInformation', { orders });
 
         const total = resp.data.grouped?.orderId?.ngroups;
 
@@ -531,7 +546,7 @@
   },
 
   async packDeliveryItems ({ commit }, shipmentId) {
     const params = {
       shipmentId: shipmentId,
       statusId: 'SHIPMENT_PACKED'
     }
@@ -666,7 +681,7 @@
   },
 
   async rejectOrderItems ({ commit }, order) {
     const payload = {
       'orderId': order.orderId
     }
     const responses = [] as any;
@@ -1076,7 +1091,7 @@
     const orderQueryPayload = prepareOrderQuery(params)
 
     let resp, total, shipGroups = [];
     const facilityTypeIds: Array<string> = [];
 
     try {
       resp = await OrderService.findOrderShipGroup(orderQueryPayload);

src/store/modules/product/actions.ts

@@ -145,6 +145,50 @@ const actions: ActionTree<ProductState, RootState> = {
 
   clearProducts ({ commit }) {
     commit(types.PRODUCT_LIST_UPDATED, { products: [], total: 0, queryString: '' })
+  },
+
+  async fetchProductComponents ( { commit, dispatch, state }, { productId }) {
+    // If there are no products skip the API call
+    if (productId === '') return;
+
+    const cachedProductIds = Object.keys(state.cached);
+    if (!cachedProductIds.includes(productId)) {
+      await dispatch('fetchProducts', { productIds: [productId] })
+    }
+    const product = state.cached[productId]
+    if (product.productComponents && product.productComponents.length > 0) {
+      return;
+    }
+
+    let resp;
+    try {
+      resp = await ProductService.fetchProductComponents({
+        "entityName": "ProductAssoc",
+          "inputFields": {
+            "productId": productId,
+            "productTypeId": "PRODUCT_COMPONENT"
+          },
+          "fieldList": ["productId", "productIdTo", "productAssocTypeId"],
+          "viewIndex": 0,
+          "viewSize": 250,  // maximum records we could have
+          "distinct": "Y",
+          "noConditionFind": "Y",
+          "filterByDate": "Y"
+      })
+      if (!hasError(resp)) {
+        const productComponents = resp.data.docs;
+        const componentProductIds = productComponents.map((productComponent: any) => productComponent.productIdTo);
+        await dispatch('fetchProducts', { productIds: componentProductIds })
+
+        product["productComponents"] = productComponents;
+        commit(types.PRODUCT_ADD_TO_CACHED_MULTIPLE, { products: [product] });
+      } else {
+        throw resp.data
+      }
+    } catch(err) {
+      logger.error('Failed to fetch product components information', err)
+    }
+    return resp;
   }
 }
 

src/utils/order.ts

@@ -90,6 +90,43 @@ const getOrderCategory = (order: any) => {
   return result;
 }
 
+const isKit = (item: any) => {
+  const product = store.getters['product/getProduct'](item.productId);
+  return product && product.productTypeId === 'MARKETING_PKG_PICK';
+}
+
+const removeKitComponents = (parts: any) => {
+  const kitItemSeqIds = new Set();
+
+  // Process and update parts
+  const updatedParts = parts.map((part: any) => {
+    const updatedItems = [] as any;
+
+    part.items.forEach((item: any) => {
+      const product = store.getters['product/getProduct'](item.productId);
+      if (product && product.productTypeId === "MARKETING_PKG_PICK") {
+        kitItemSeqIds.add(item.orderItemSeqId);
+      }
+    });
+
+    //In current implementation kit product and component product will have the same orderItemSeqId
+    part.items.forEach((item: any) => {
+      const product = store.getters['product/getProduct'](item.productId);
+      if ((product && product.productTypeId === "MARKETING_PKG_PICK") || !kitItemSeqIds.has(item.orderItemSeqId)) {
+        item["productTypeId"] = product ? product.productTypeId : null;
+        updatedItems.push(item);
+      }
+    });
+
+    return { ...part, items: updatedItems };
+  });
+
+  return updatedParts;
+};
+
+
 export {
-  getOrderCategory
+  getOrderCategory,
+  isKit,
+  removeKitComponents
 }

src/views/Orders.vue

@@ -98,7 +98,7 @@
               </ion-label>
             </ion-item>
 
-            <ProductListItem v-for="item in order.part.items" :key="item.productId" :item="item" />
+            <ProductListItem v-for="item in order.part.items" :key="item.productId" :item="item"/>
 
             <ion-item v-if="order.customer.phoneNumber">
               <ion-icon :icon="callOutline" slot="start" />