Merge pull request #366 from ymaheshwari1/fulfillment-pwa/#268

Implemented: support for kit products (#268)
hotwax · Dec 12, 2023 · fd54f3d · fd54f3d
2 parents c723066 + 39432a2
commit fd54f3d
Show file tree

Hide file tree

Showing 8 changed files with 529 additions and 158 deletions.
diff --git a/src/services/OrderService.ts b/src/services/OrderService.ts
@@ -400,7 +400,7 @@ const fetchOrderItemShipGroup = async (order: any): Promise<any> => {
     "entityName": "OrderItemShipGroup",
     "inputFields": {
       "orderId": order.orderId,
-      "shipGroupSeqId": order.items[0].shipGroupSeqId,
+      "shipGroupSeqId": order.shipGroupSeqId,
     },
     "fieldList": ["orderId", "shipGroupSeqId", "facilityId", "shipmentMethodTypeId", "contactMechId"],
     "distinct": "Y"

diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
diff --git a/src/store/modules/product/actions.ts b/src/store/modules/product/actions.ts
@@ -5,6 +5,7 @@ import ProductState from './ProductState'
 import * as types from './mutation-types'
 import { hasError } from '@/adapter'
 import logger from "@/logger";
+import { isKitComponent } from "@/utils/order";
 
 const actions: ActionTree<ProductState, RootState> = {
 
@@ -48,7 +49,14 @@ const actions: ActionTree<ProductState, RootState> = {
     let productIds: any = new Set();
     orders.forEach((list: any) => {
       list.doclist.docs.forEach((order: any) => {
-        if (order.productId) productIds.add(order.productId)
+        if (order.productId) {
+          productIds.add(order.productId)
+          // when the item is a kitComponent, fetching information for kit parentProduct
+          if(isKitComponent(order)) {
+            const assoc = order.toOrderItemAssocs.find((assoc: any) => assoc.split("/")[0] === 'KIT_COMPONENT')
+            productIds.add(assoc.split("/")[2])
+          }
+        }
       })
     })
 

diff --git a/src/utils/order.ts b/src/utils/order.ts
@@ -79,7 +79,32 @@ const getOrderCategory = (order: any) => {
   return result;
 }
 
+const isKitComponent = (item: any) => {
+  return item.toOrderItemAssocs?.some((assoc: any) => assoc.split("/")[0] === 'KIT_COMPONENT')
+}
+
+const prepareKitProducts = (order: any) => {
+  return order.items.reduce((kitProducts: any, item: any) => {
+    if (item.toOrderItemAssocs && isKitComponent(item)) {
+      const kitItemAssocs = item.toOrderItemAssocs.find((assoc: any) => assoc.split("/")[0] === 'KIT_COMPONENT')
+      // getting second and third values i.e kit product's orderItemSeqId and parentProductId
+      const [, orderItemSeqId, parentProductId] = kitItemAssocs.split('/')
+      if (!kitProducts[orderItemSeqId]) {
+        kitProducts[orderItemSeqId] = []
+      }
+
+      kitProducts[orderItemSeqId].push({
+        parentProductId,
+        ...item
+      })
+    }
+
+    return kitProducts
+  }, {})
+}
 
 export {
-  getOrderCategory
+  prepareKitProducts,
+  getOrderCategory,
+  isKitComponent
 }
diff --git a/src/views/Completed.vue b/src/views/Completed.vue
@@ -68,7 +68,7 @@
               </div>
             </div>
 
-            <div v-for="item in order.items" :key="item.orderItemSeqId" class="order-item">
+            <div v-for="item in order.orderItems" :key="item.orderItemSeqId" class="order-item">
               <div class="product-info">
                 <ion-item lines="none">
                   <ion-thumbnail slot="start">
@@ -81,8 +81,6 @@
                   </ion-label>
                 </ion-item>
               </div>
-
-              <!-- TODO: add a spinner if the api takes too long to fetch the stock -->
               <div class="product-metadata">
                 <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
                 <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
@@ -91,6 +89,41 @@
               </div>
             </div>
 
+            <div v-if="order.kitProducts">
+              <div v-for="(kitProduct, orderItemSeqId) in order.kitProducts" :key="orderItemSeqId">
+                <ion-item-divider class="order-item" color="light">
+                  <div class="product-info">
+                    <ion-label>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).productName }}</p>
+                      <p>{{ getProduct(kitProduct[0].parentProductId).sku }}</p>
+                    </ion-label>
+                  </div>
+                </ion-item-divider>
+
+                <div v-for="item in kitProduct" :key="item.orderItemSeqId" class="order-item">
+                  <div class="product-info">
+                    <ion-item lines="none">
+                      <ion-thumbnail slot="start">
+                        <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"/>
+                      </ion-thumbnail>
+                      <ion-label>
+                        <p class="overline">{{ item.productSku }}</p>
+                        {{ item.productName }}
+                        <p>{{ getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')}} {{ getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')}}</p>
+                      </ion-label>
+                    </ion-item>
+                  </div>
+
+                  <div class="product-metadata">
+                    <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal">{{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}</ion-note>
+                    <ion-button fill="clear" v-else size="small" @click.stop="fetchProductStock(item.productId)">
+                      <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
+                    </ion-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <!-- TODO: implement functionality to mobile view -->
             <div class="mobile-only">
               <ion-item>
@@ -153,6 +186,7 @@ import {
   IonInfiniteScroll,
   IonInfiniteScrollContent,
   IonItem,
+  IonItemDivider,
   IonLabel,
   IonMenuButton,
   IonNote,
@@ -202,6 +236,7 @@ export default defineComponent({
     IonInfiniteScroll,
     IonInfiniteScrollContent,
     IonItem,
+    IonItemDivider,
     IonLabel,
     IonMenuButton,
     IonNote,
@@ -255,7 +290,7 @@ export default defineComponent({
       })
     },
     getCompletedOrders() {
-      return this.completedOrders.list.slice(0, (this.completedOrders.query.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any) );
+      return JSON.parse(JSON.stringify(this.completedOrders.list)).slice(0, (this.completedOrders.query.viewIndex + 1) * (process.env.VUE_APP_VIEW_SIZE as any));
     },
     async loadMoreCompletedOrders(event: any) {
       const completedOrdersQuery = JSON.parse(JSON.stringify(this.completedOrders.query))