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/fetchInventoryCount', { 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)">
+    <div slot="end" v-if="!isShipToStoreOrder">
+      <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>
+        <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",
+      getProductStock: 'stock/getProductStock',
+      currentFacility: 'user/getCurrentFacility',
     })
   },
   methods: {
     async fetchProductStock(productId: string) {
       this.isFetchingStock = true
-      await this.store.dispatch('stock/fetchStock', { productId })
+      await this.store.dispatch('stock/fetchStock', { 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",
@@ -93,6 +94,7 @@
   "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "On rejecting this item, { customerName } will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.",
   "On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.": "On rejecting this order, { customerName } will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.",
   "Online ATP": "Online ATP",
+  "on hand": "{ count } on hand",
   "Other stores inventory": "Other stores inventory",
   "Order": "Order",
   "Order delivered to": "Order delivered to { customerName }",
@@ -113,8 +115,9 @@
   "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",
+  "Other items": "Other items",
   "Packed": "Packed",
   "Packing Slip": "Packing Slip",
   "Packing slips help customer reconcile their order against the delivered items.": "Packing slips help customer reconcile their order against the delivered items.",
@@ -128,7 +131,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 +200,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",
@@ -90,6 +91,7 @@
   "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "Al rechazar este artículo, se enviará a {customerName} un correo electrónico con opciones de cumplimiento alternativas y este artículo del pedido se eliminará de su panel de control.",
   "On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.": "Al rechazar este pedido, {customerName} recibirá un correo electrónico con opciones de cumplimiento alternativas y este pedido se eliminará de su panel.",
   "Online ATP": "Online ATP",
+  "on hand": "{ count } on hand",
   "Other stores inventory": "Inventario de otras tiendas",
   "Order": "Orden",
   "Order delivered to": "Orden entregada a {customerName}",
@@ -110,8 +112,9 @@
   "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",
+  "Other items": "Other items",
   "Packed": "Empacado",
   "Packing Slip": "Remisión de embalaje",
   "Packing slips help customer reconcile their order against the delivered items.": "Las remisiones de embalaje ayudan al cliente a conciliar su orden con los artículos entregados.",
@@ -125,7 +128,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 +198,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": "受け取り人の割当",
@@ -90,6 +91,7 @@
   "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "On rejecting this item, { customerName } will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.",
   "On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.": "On rejecting this order, { customerName } will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.",
   "Online ATP": "Online ATP",
+  "on hand": "{ count } on hand",
   "Other stores inventory": "その他店舗在庫",
   "Order": "注文",
   "Order delivered to": "注文は { customerName }様 に配達されました",
@@ -110,8 +112,9 @@
   "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",
+  "Other items": "Other items",
   "Packed": "梱包済み",
   "Packing Slip": "納品書",
   "Packing slips help customer reconcile their order against the delivered items.": "内容明細票はお客様が注文と配送された商品を確認（照合）する際に役立ちます。",
@@ -125,7 +128,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 +197,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;
 }