Implemented: Functional UI to Display Inventory Computation for Order Items(#386)

src/components/InventoryDetailsPopover.vue

@@ -3,20 +3,20 @@
     <ion-list>
       <ion-list-header>{{ translate("Inventory computation")}}</ion-list-header>
       <ion-item>
-        <ion-label class="ion-text-wrap">{{ translate("Quantity on hands")}}</ion-label>
-        <ion-note slot="end">52</ion-note>
+        <ion-label class="ion-text-wrap">{{ translate("Quantity on hand")}}</ion-label>
+        <ion-note slot="end">{{ getProductStock(item.productId).quantityOnHandTotal ?? '0' }}</ion-note>
       </ion-item>
       <ion-item>
         <ion-label class="ion-text-wrap">{{ translate("Safety stock")}}</ion-label>
-        <ion-note slot="end">4</ion-note>
+        <ion-note slot="end">{{ getInventoryInformation(item.productId).minimumStock ?? '0' }}</ion-note>
       </ion-item>
       <ion-item>
         <ion-label class="ion-text-wrap">{{ translate("Order reservations")}}</ion-label>
-        <ion-note slot="end">1</ion-note>
+        <ion-note slot="end">{{ getInventoryInformation(item.productId).reservedQuantity ?? '0' }}</ion-note>
       </ion-item>
       <ion-item lines="none">
         <ion-label class="ion-text-wrap">{{ translate("Online ATP")}}</ion-label>
-        <ion-badge slot="end" color="success">52</ion-badge>
+        <ion-badge slot="end" color="success">{{ getInventoryInformation(item.productId).onlineAtp ?? '0' }}</ion-badge>
       </ion-item>
     </ion-list>
   </ion-content>
@@ -25,56 +25,55 @@
 <script lang="ts">
 import {
   IonBadge,
-  IonButtons,
   IonContent,
-  IonHeader,
   IonItem,
   IonLabel,
   IonList,
-  IonNote,
-  IonTitle,
-  IonToolbar
+  IonListHeader,
+  IonNote
 } from '@ionic/vue'
 
 import { defineComponent } from 'vue';
-import { useStore } from 'vuex';
+import { useStore, mapGetters } from 'vuex';
 import { translate } from '@hotwax/dxp-components';
 
-export default defineComponent({
+export default defineComponent({  
   name: 'InventoryDetailsPopover',
-  component:{
+  components:{
     IonBadge,
-    IonButtons,
     IonContent,
-    IonHeader,
     IonItem,
     IonLabel,
     IonList,
+    IonListHeader,
     IonNote,
-    IonTitle,
-    IonToolbar
-  },
-  props: {
-  },
-  data () {
-      return {
-
-      }
   },
+  props: ['item'],
   computed: {
-
+    ...mapGetters({
+      product: "product/getCurrent",
+      getProductStock: 'stock/getProductStock',
+      getInventoryInformation: 'stock/getInventoryInformation',
+      currentFacility: 'user/getCurrentFacility',
+    })   
+  },
+  async beforeMount () {
+    const productId = this.item?.productId;
+    await this.store.dispatch('stock/fetchStock', { productId })
+    this.fetchReservedQuantity( this.item.productId );
   },
   methods: {
-
+    async fetchReservedQuantity(productId: any){
+      await this.store.dispatch('stock/fetchReservedQuantity', { productId });
+    },
   },
+
   setup () {
     const store = useStore();
     return {
-    store,
-    translate
-  };
-
-
+      store,
+      translate
+    }
   }
 })
 </script>

src/components/ProductListItem.vue

@@ -6,22 +6,20 @@
     <ion-label class="ion-text-wrap">
       <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) }}</h2>
       <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
-      <p>Color: color</p>
-      <p>Size: size</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
-      <ion-button v-if="!isFetchingStock && !showInfoIcon" fill="clear" @click.stop="fetchProductStock(item.productId)">
-        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
-      </ion-button>
-      <div v-else-if="showInfoIcon" class="atp-info">
-        <ion-note slot="end"> 50 ATP </ion-note>
-        <ion-button fill="clear" @click.stop="getInventoryComputationDetails($event)">
+      <ion-spinner v-if="isFetchingStock" color="medium" name="crescent" />
+      <div v-else-if="getInventoryInformation(item.productId).onlineAtp >= 0" class="atp-info">
+        <ion-note slot="end"> {{ getInventoryInformation(item.productId).onlineAtp ?? '0' }} </ion-note>
+        <ion-button fill="clear" @click.stop="openInventoryDetailPopover($event)">
           <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
         </ion-button>
       </div>
-      <ion-spinner v-else color="medium" name="crescent" />
-    </div>
+      <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId)">
+        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
+      </ion-button>
+    </div>  
   </ion-item>
 </template>
 
@@ -49,37 +47,31 @@ export default defineComponent({
     return {
       goodIdentificationTypeId: process.env.VUE_APP_PRDT_IDENT_TYPE_ID,
       isFetchingStock: false,
-      showInfoIcon: false
-    }
-  },
-  props: {
-    item: Object,
-    isShipToStoreOrder: {
-      type: Boolean,
-      default: false
     }
   },
+  props: ['item', 'isShipToStoreOrder'],
   computed: {
     ...mapGetters({
       getProduct: 'product/getProduct',
-      getProductStock: 'stock/getProductStock'
+      product: "product/getCurrent",
+      getInventoryInformation: 'stock/getInventoryInformation',
+      currentFacility: 'user/getCurrentFacility',
     })
   },
   methods: {
     async fetchProductStock(productId: string) {
       this.isFetchingStock = true
-      await this.store.dispatch('stock/fetchStock', { productId })
+      await this.store.dispatch('stock/fetchInventoryCount', { productId });
       this.isFetchingStock = false
-      this.showInfoIcon = true;
     },
-    async getInventoryComputationDetails(Event: any){
+    async openInventoryDetailPopover(Event: any){
       const popover = await popoverController.create({
         component: InventoryDetailsPopover,
         event: Event,
-        // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
+        showBackdrop: false,
+        componentProps: { item: this.item }
       });
       await popover.present();
-
     },
     updateColor(stock: number) {
       return stock ? stock < 10 ? 'warning' : 'success' : 'danger';

src/locales/en.json

@@ -8,6 +8,7 @@
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
   "Are you sure you want to update the notification preferences?": "Are you sure you want to update the notification preferences?",
   "Arrived": "Arrived",
+  "ATP": "{ count } ATP",
   "Available to promise": "Available to promise",
   "Authenticating": "Authenticating",
   "Assign Pickers": "Assign Pickers",
@@ -113,7 +114,7 @@
   "Orders Not Found": "Orders Not Found",
   "Order item rejection history": "Order item rejection history",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at": "{ count } order reservations at { store }",
   "Other stores": "Other stores",
   "Packed": "Packed",
   "Packing Slip": "Packing Slip",
@@ -128,7 +129,7 @@
   "Product details": "Product details",
   "Product not found": "Product not found",
   "Products not found": "Products not found",
-  "Quantity on hands": "Quantity on hands",
+  "Quantity on hand": "Quantity on hand",
   "Re-route Fulfillment": "Re-route Fulfillment",
   "Ready for pickup": "Ready for pickup",
   "Ready to create an app?": "Ready to create an app?",
@@ -197,6 +198,8 @@
   "Worn Display": "Worn Display",
   "This order will be removed from your dashboard. This action cannot be undone.": "This order will be removed from your dashboard.{ space } This action cannot be undone.",
   "Update notification preferences": "Update notification preferences",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "View shipping orders along with pickup orders.",
   "You do not have permission to access this page": "You do not have permission to access this page",
   "Zipcode": "Zipcode"

src/locales/es.json

@@ -8,6 +8,7 @@
   "Are you sure you want to change the time zone to?": "¿Estás seguro de que quieres cambiar la zona horaria a?",
   "Are you sure you want to update the notification preferences?": "¿Estás seguro de que deseas actualizar las preferencias de notificación?",
   "Arrived": "Llegó",
+  "ATP": "{ count } ATP",
   "Available to promise": "Available to promise",
   "Authenticating": "Autenticación",
   "Assign Pickers": "Asignar recolectores",
@@ -110,7 +111,7 @@
   "Orders Not Found": "Órdenes no encontradas",
   "Order item rejection history": "Historial de rechazo de artículos de pedido",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at": "{ count } order reservations at { store }",
   "Other stores": "Otras tiendas",
   "Packed": "Empacado",
   "Packing Slip": "Remisión de embalaje",
@@ -125,7 +126,7 @@
   "Product details": "Detalles del producto",
   "Product not found": "Producto no encontrado",
   "Products not found": "Productos no encontrados",
-  "Quantity on hands": "Quantity on hands",
+  "Quantity on hand": "Quantity on hand",
   "Re-route Fulfillment": "Redireccionar cumplimiento",
   "Ready for pickup": "Listo para recoger",
   "Ready to create an app?": "¿Listo para crear una aplicación?",
@@ -195,6 +196,8 @@
   "Worn Display": "Pantalla desgastada",
   "This order will be removed from your dashboard. This action cannot be undone.": "Este pedido será eliminado de tu panel de control.{ space } Esta acción no se puede deshacer.",
   "Update notification preferences": "Actualizar preferencias de notificación",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "Ver órdenes de envío junto con órdenes de recogida.",
   "You do not have permission to access this page": "No tienes permiso para acceder a esta página",
   "Zipcode": "Código postal",

src/locales/ja.json

@@ -8,6 +8,7 @@
   "Are you sure you want to change the time zone to?": "タイムゾーンを変更してもよろしいですか？",
   "Are you sure you want to update the notification preferences?": "Are you sure you want to update the notification preferences?",
   "Arrived": "到着",
+  "ATP": "{ count } ATP",
   "Available to promise": "Available to promise",
   "Authenticating": "Authenticating",
   "Assign Pickers": "受け取り人の割当",
@@ -110,7 +111,7 @@
   "Orders Not Found": "注文が見つかりません",
   "Order item rejection history": "Order item rejection history",
   "Order reservations": "Order reservations",
-  "order reservtions at the store": "{ count } order reservtions at the store",
+  "order reservations at": "{ count } order reservations at { store }",
   "Other stores": "Other stores",
   "Packed": "梱包済み",
   "Packing Slip": "納品書",
@@ -125,7 +126,7 @@
   "Product details": "商品詳細",
   "Product not found": "商品が見つかりません",
   "Products not found": "商品が見つかりません",
-  "Quantity on hands": "Quantity on hands",
+  "Quantity on hand": "Quantity on hand",
   "Re-route Fulfillment": "リルート（受取方法や受取場所の変更）",
   "Ready for pickup": "ピックアップの準備ができました",
   "Ready to create an app?": "アプリを作成する準備はできましたか?",
@@ -194,6 +195,8 @@
   "Worn Display": "すり切れたディスプレイ",
   "This order will be removed from your dashboard. This action cannot be undone.": "この注文はダッシュボードから削除されます。{ space } この操作は元に戻せません。",
   "Update notification preferences": "Update notification preferences",
+  "units": "{ item } units",
+  "unit": "{ item } unit",
   "View shipping orders along with pickup orders.": "店舗受取の注文と一緒に配送注文を表示します",
   "You do not have permission to access this page": "このページにアクセスする権限がありません",
   "Zipcode": "郵便番号"

src/services/OrderService.ts

@@ -13,6 +13,14 @@ const getOpenOrders = async (payload: any): Promise <any> => {
   });
 }
 
+const fetchOrderItems = async (payload: any): Promise <any> => {
+  return api({
+    url: "solr-query",
+    method: "post",
+    data: payload
+  });
+}
+
 const getOrderDetails = async (payload: any): Promise <any> => {
   return api({
     url: "solr-query",
@@ -259,6 +267,7 @@ const getShippingPhoneNumber = async (orderId: string): Promise<any> => {
 }
 
 export const OrderService = {
+  fetchOrderItems,
   fetchOrderPaymentPreferences,
   getOpenOrders,
   getOrderDetails,

src/services/StockService.ts

@@ -16,7 +16,16 @@ const getInventoryAvailableByFacility = async (query: any): Promise <any> => {
   });
 }
 
+const fetchInventoryCount = async (payload: any ): Promise<any> => {
+  return api({
+    url: 'performFind',
+    method: 'post',
+    data: payload
+  });
+}
+
 export const StockService = {
   checkInventory,
-  getInventoryAvailableByFacility
+  getInventoryAvailableByFacility,
+  fetchInventoryCount
 }

src/services/UtilService.ts

@@ -33,9 +33,18 @@ const resetPicker = async (payload: any): Promise<any> => {
   })
 }
 
+const fetchReservedQuantity = async (query: any): Promise <any>  => {
+  return api({
+    url: "solr-query", 
+    method: "post",
+    data: query
+  });
+}
+
 export const UtilService = {
   fetchPaymentMethodTypeDesc,
   fetchRejectReasons,
   fetchStatusDesc,
-  resetPicker
+  resetPicker,
+  fetchReservedQuantity
 }

src/store/modules/order/OrderState.ts

@@ -4,5 +4,6 @@ export default interface OrderState {
   current: any;
   packed: any;
   completed: any;
-  shipToStore: any
+  shipToStore: any;
+  orders: any;
 }