Display Inventory Computation for Order Items (#386)

src/components/InventoryDetailsPopover.vue

@@ -0,0 +1,80 @@
+<template>
+  <ion-content>
+    <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-item>
+      <ion-item>
+        <ion-label class="ion-text-wrap">{{ translate("Safety stock")}}</ion-label>
+        <ion-note slot="end">4</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-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-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonBadge,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonNote,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue'
+
+import { defineComponent } from 'vue';
+import { useStore } from 'vuex';
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: 'InventoryDetailsPopover',
+  component:{
+    IonBadge,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonNote,
+    IonTitle,
+    IonToolbar
+  },
+  props: {
+  },
+  data () {
+      return {
+
+      }
+  },
+  computed: {
+
+  },
+  methods: {
+
+  },
+  setup () {
+    const store = useStore();
+    return {
+    store,
+    translate
+  };
+
+
+  }
+})
+</script>

src/components/ProductListItem.vue

@@ -6,26 +6,32 @@
     <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-note v-if="getProductStock(item.productId).quantityOnHandTotal >= 0" :color="updateColor(getProductStock(item.productId).quantityOnHandTotal)">
-        {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}
-      </ion-note>
-      <ion-spinner v-else-if="isFetchingStock" color="medium" name="crescent" />
-      <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId)">
-        <ion-icon color="medium" slot="icon-only" :icon="cubeOutline"/>
+      <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-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
+        </ion-button>
+      </div>
+      <ion-spinner v-else color="medium" name="crescent" />
     </div>
   </ion-item>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from "vue";
-import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail } from "@ionic/vue";
+import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail, popoverController } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
 import { getProductIdentificationValue, DxpShopifyImg, translate, useProductIdentificationStore } from '@hotwax/dxp-components'
-import { cubeOutline } from 'ionicons/icons'
+import { cubeOutline, informationCircleOutline } from 'ionicons/icons'
+import InventoryDetailsPopover from '@/components/InventoryDetailsPopover.vue'
 
 export default defineComponent({
   name: "ProductListItem",
@@ -42,7 +48,8 @@ export default defineComponent({
   data () {
     return {
       goodIdentificationTypeId: process.env.VUE_APP_PRDT_IDENT_TYPE_ID,
-      isFetchingStock: false
+      isFetchingStock: false,
+      showInfoIcon: false
     }
   },
   props: {
@@ -63,6 +70,16 @@ export default defineComponent({
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId })
       this.isFetchingStock = false
+      this.showInfoIcon = true;
+    },
+    async getInventoryComputationDetails(Event: any){
+      const popover = await popoverController.create({
+        component: InventoryDetailsPopover,
+        event: Event,
+        // componentProps: { otherStoresInventory: this.otherStoresInventoryDetails }
+      });
+      await popover.present();
+
     },
     updateColor(stock: number) {
       return stock ? stock < 10 ? 'warning' : 'success' : 'danger';
@@ -76,6 +93,7 @@ export default defineComponent({
       getProductIdentificationValue,
       productIdentificationPref,
       cubeOutline,
+      informationCircleOutline,
       store,
       translate
     }
@@ -87,4 +105,10 @@ export default defineComponent({
 ion-thumbnail > img {
   object-fit: contain;
 }
+
+.atp-info {
+  display: flex;
+  align-items: center; 
+  flex-direction: row; 
+}
 </style>

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",
+  "Available to promise": "Available to promise",
   "Authenticating": "Authenticating",
   "Assign Pickers": "Assign Pickers",
   "Browser TimeZone": "Browser TimeZone",
@@ -57,6 +58,7 @@
   "Instance Url": "Instance Url",
   "In store": "In store",
   "Inventory": "Inventory",
+  "Inventory computation": "Inventory computation",
   "Item has been rejected successfully.": "Item has been rejected successfully.",
   "Language": "Language",
   "Last name": "Last name",
@@ -90,6 +92,7 @@
   "OMS instance": "OMS instance",
   "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",
   "Other stores inventory": "Other stores inventory",
   "Order": "Order",
   "Order delivered to": "Order delivered to { customerName }",
@@ -109,6 +112,8 @@
   "Orders": "Orders",
   "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",
   "Other stores": "Other stores",
   "Packed": "Packed",
   "Packing Slip": "Packing Slip",
@@ -123,6 +128,7 @@
   "Product details": "Product details",
   "Product not found": "Product not found",
   "Products not found": "Products not found",
+  "Quantity on hands": "Quantity on hands",
   "Re-route Fulfillment": "Re-route Fulfillment",
   "Ready for pickup": "Ready for pickup",
   "Ready to create an app?": "Ready to create an app?",
@@ -137,6 +143,7 @@
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
   "Resend email": "Resend email",
+  "Safety stock": "Safety stock",
   "Search": "Search",
   "Search Orders": "Search Orders",
   "Search time zones": "Search time zones",

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ó",
+  "Available to promise": "Available to promise",
   "Authenticating": "Autenticación",
   "Assign Pickers": "Asignar recolectores",
   "Browser TimeZone": "Browser TimeZone",
@@ -55,6 +56,7 @@
   "Instance Url": "URL de la instancia",
   "In store": "En tienda",
   "Inventory": "Inventario",
+  "Inventory computation": "Inventory computation",
   "Item has been rejected successfully.": "El artículo ha sido rechazado exitosamente.",
   "Language": "Idioma",
   "Last name": "Apellido",
@@ -87,6 +89,7 @@
   "OMS instance": "Instancia de OMS",
   "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",
   "Other stores inventory": "Inventario de otras tiendas",
   "Order": "Orden",
   "Order delivered to": "Orden entregada a {customerName}",
@@ -106,6 +109,8 @@
   "Orders": "Órdenes",
   "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",
   "Other stores": "Otras tiendas",
   "Packed": "Empacado",
   "Packing Slip": "Remisión de embalaje",
@@ -120,6 +125,7 @@
   "Product details": "Detalles del producto",
   "Product not found": "Producto no encontrado",
   "Products not found": "Productos no encontrados",
+  "Quantity on hands": "Quantity on hands",
   "Re-route Fulfillment": "Redireccionar cumplimiento",
   "Ready for pickup": "Listo para recoger",
   "Ready to create an app?": "¿Listo para crear una aplicación?",
@@ -134,6 +140,7 @@
   "Report an issue": "Reportar un problema",
   "Resend customer email": "Reenviar correo electrónico al cliente",
   "Resend email": "Reenviar correo electrónico",
+  "Safety stock": "Safety stock",
   "Search": "Buscar",
   "Search Orders": "Buscar pedidos",
   "Search time zones": "Buscar zonas horarias",

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": "到着",
+  "Available to promise": "Available to promise",
   "Authenticating": "Authenticating",
   "Assign Pickers": "受け取り人の割当",
   "Browser TimeZone": "Browser TimeZone",
@@ -55,6 +56,7 @@
   "Instance Url": "インスタンスURL",
   "In store": "店頭",
   "Inventory": "在庫",
+  "Inventory computation": "Inventory computation",
   "Item has been rejected successfully.": "Item has been rejected successfully.",
   "Language": "言語",
   "Last name": "姓",
@@ -87,6 +89,7 @@
   "OMS instance": "OMSインスタンス",
   "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",
   "Other stores inventory": "その他店舗在庫",
   "Order": "注文",
   "Order delivered to": "注文は { customerName }様 に配達されました",
@@ -106,6 +109,8 @@
   "Orders": "注文",
   "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",
   "Other stores": "Other stores",
   "Packed": "梱包済み",
   "Packing Slip": "納品書",
@@ -120,6 +125,7 @@
   "Product details": "商品詳細",
   "Product not found": "商品が見つかりません",
   "Products not found": "商品が見つかりません",
+  "Quantity on hands": "Quantity on hands",
   "Re-route Fulfillment": "リルート（受取方法や受取場所の変更）",
   "Ready for pickup": "ピックアップの準備ができました",
   "Ready to create an app?": "アプリを作成する準備はできましたか?",
@@ -134,6 +140,7 @@
   "Report an issue": "Report an issue",
   "Resend customer email": "Resend customer email",
   "Resend email": "Resend email",
+  "Safety stock": "Safety stock",
   "Search": "検索",
   "Search Orders": "注文の検索",
   "Search time zones": "タイムゾーンの検索",

src/views/OtherStoresInventoryModal.vue

@@ -10,6 +10,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
+    <ion-searchbar/>
     <ion-list v-if="otherStoresInventory.length">
       <ion-item v-for="details in otherStoresInventory" :key="details.facilityName">
         <ion-label class="ion-text-wrap">{{ details.facilityName }}</ion-label>