Implemented: support to reject and cancel items from open and packed detail pages and revamped the detail page UI(#472)

src/components/ConfirmCancelModal.vue

@@ -0,0 +1,198 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Cancel items") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ translate("Summary") }}</ion-list-header>
+      <ion-item v-for="(item, index) in cancelledItems" :key="index">
+        <ion-thumbnail slot="start">
+          <DxpShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
+        </ion-thumbnail>
+        <ion-label class="ion-text-wrap">
+          <h2>{{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(item.productId)) : getProduct(item.productId).productName }}</h2>
+          <p class="ion-text-wrap">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(item.productId)) }}</p>
+          <p class="ion-text-wrap">{{ getCancelReasonDescription(item.cancelReason) }}</p>
+          <ion-badge color="dark" v-if="isKit(item)">{{ translate("Kit") }}</ion-badge>
+        </ion-label>
+        <ion-note slot="end">{{ getProduct(item.productId).LIST_PRICE_PURCHASE_USD_STORE_GROUP_price ? getProduct(item.productId).LIST_PRICE_PURCHASE_USD_STORE_GROUP_price : "" }}</ion-note>
+      </ion-item>
+
+      <ion-item lines="full">
+        <ion-label>{{ translate("Total") }}</ion-label>
+        <ion-note slot="end">{{ orderTotal }}</ion-note>
+      </ion-item>
+
+      <ion-item lines="full" v-if="isCancelationSyncJobEnabled && isProcessRefundEnabled">
+        <ion-label>
+          {{ translate("Estimated time to refund customer on Shopify") }}
+          <p>{{ translate("Showing the next estimated time to sync cancelation to Shopify") }}</p>
+        </ion-label>
+        <ion-note slot="end">{{ runTimeDiff }}</ion-note>
+      </ion-item>
+      <ion-item lines="full" v-else-if="isCancelationSyncJobEnabled">
+        <ion-label>
+          {{ translate("Estimated time to cancelation on Shopify") }}
+          <p>{{ translate("Showing the next estimated time to sync cancelation to Shopify") }}</p>
+          <p>{{ translate("Cancelation sync to Shopify is enabled. Refund processing is disabled.") }}</p>
+        </ion-label>
+        <ion-note slot="end">{{ runTimeDiff }}</ion-note>
+      </ion-item>
+      <ion-item lines="full" v-else>
+        <ion-label>
+          {{ translate("Cancelation not syncing to Shopify") }}
+          <p>{{ translate("Cancelation and refund sync to Shopify is not enabled.") }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+
+    <ion-button class="ion-margin" color="danger" @click="cancelOrder">
+      {{ translate("Confirm Cancelation") }}
+    </ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonTitle,
+  IonThumbnail,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { computed, defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { mapGetters, useStore } from "vuex"
+import { OrderService } from "@/services/OrderService";
+import { getProductIdentificationValue, translate, useProductIdentificationStore, useUserStore } from "@hotwax/dxp-components";
+import { isKit } from "@/utils/order"
+import { showToast } from "@/utils";
+import { hasError } from "@hotwax/oms-api";
+import { DateTime } from "luxon";
+
+export default defineComponent({
+  name: "ConfirmCancelModal",
+  components: {
+    IonBadge,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonNote,
+    IonTitle,
+    IonThumbnail,
+    IonToolbar
+  },
+  props: ["order", "isCancelationSyncJobEnabled", "isProcessRefundEnabled", "cancelJobNextRunTime", "orderType"],
+  data() {
+    return {
+      cancelledItems: [] as Array<any>,
+      orderTotal: 0,
+      currentOrder: {} as any,
+      runTimeDiff: ""
+    }
+  },
+  computed: {
+    ...mapGetters({
+      getProduct: "product/getProduct",
+      cancelReasons: "util/getCancelReasons",
+      currency: "user/getCurrency"
+    })
+  },
+  mounted() {
+    this.currentOrder = JSON.parse(JSON.stringify(this.order))
+    this.cancelledItems = this.currentOrder.part.items.filter((item: any) => item.cancelReason)
+    this.orderTotal = this.cancelledItems.reduce((total: any, item: any) => this.getProduct(item.productId).LIST_PRICE_PURCHASE_USD_STORE_GROUP_price + total, 0)
+    const timeDiff = DateTime.fromMillis(this.cancelJobNextRunTime).diff(DateTime.local());
+    this.runTimeDiff = DateTime.local().plus(timeDiff).toRelative();
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    getCancelReasonDescription(cancelReasonId: string) {
+      const reason = this.cancelReasons?.find((reason: any) => reason.enumId === cancelReasonId)
+      return reason?.description ? reason.description : reason?.enumDescription ? reason.enumDescription : reason?.enumId;
+    },
+    async cancelOrder() {
+      let isCancelled = true
+      for (const item of this.cancelledItems) {
+        const params = {
+          orderId: this.currentOrder.orderId,
+          orderItemSeqId: item.orderItemSeqId,
+          shipGroupSeqId: item.shipGroupSeqId,
+          cancelQuantity: item.quantity ? parseInt(item.quantity) : 1,
+          [`irm_${item.orderItemSeqId}`]: item.cancelReason
+        }
+
+        try {
+          const resp = await OrderService.cancelItem(params);
+
+          if(hasError(resp)) {
+            throw resp.data
+          } else {
+            this.currentOrder["part"] = {
+              ...this.currentOrder.part,
+              items: this.currentOrder.part.items.filter((orderItem: any) => !(orderItem.orderItemSeqId === item.orderItemSeqId && orderItem.productId === item.productId))
+            }
+          }
+        } catch(err) {
+          isCancelled = false
+        }
+      }
+
+      // If all the items are cancelled then marking the whole order as cancelled
+      if(!this.currentOrder.part.items.length) {
+        this.currentOrder.cancelled = true;
+      } else {
+        // If we have only cancelled some order items and the cancelation is completd then changing the shipment status to packed
+        // This is done because when cancelling some of the order items the shipment is marked as approved, resulting in removing the order from packed tab
+        // but we need the order to be displayed in packed tab as it still has some items as reserved status
+        if(isCancelled) {
+          await this.store.dispatch("order/packDeliveryItems", this.currentOrder.shipmentId)
+        }
+      }
+
+      await this.store.dispatch("order/updateCurrent", { order: this.currentOrder });
+      this.closeModal();
+    }
+  },
+  setup() {
+    const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
+    return {
+      closeOutline,
+      isKit,
+      getProductIdentificationValue,
+      productIdentificationPref,
+      saveOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>

src/components/ReportAnIssuePopover.vue

@@ -0,0 +1,60 @@
+<template>
+  <ion-content>
+    <ion-list v-if="reasonType === 'reject'">
+      <ion-item v-for="reason in rejectReasons" :key="reason.enumId" @click="updateIssue(reason.enumId)" button>
+        {{ reason.description ? translate(reason.description) : reason.enumDescription ? translate(reason.enumDescription) : reason.enumId  }}
+      </ion-item>
+    </ion-list>
+    <ion-list v-else>
+      <ion-item v-for="reason in cancelReasons" :key="reason.enumId" @click="updateIssue(reason.enumId)" button>
+        {{ reason.description ? translate(reason.description) : reason.enumDescription ? translate(reason.enumDescription) : reason.enumId  }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  popoverController,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { mapGetters } from 'vuex';
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: "ReportIssuePopover",
+  components: { 
+    IonContent,
+    IonItem,
+    IonList
+  },
+  props: {
+    reasonType: {
+      type: String,
+      default: "reject"
+    }
+  },
+  computed: {
+    ...mapGetters({
+      rejectReasons: 'util/getRejectReasons',
+      cancelReasons: 'util/getCancelReasons',
+    })
+  },
+  methods: {
+    closePopover() {
+      popoverController.dismiss();
+    },
+    updateIssue(enumId: string) {
+      popoverController.dismiss(enumId);
+    },
+  },
+  setup() {
+    return {
+      translate
+    }
+  }
+});
+</script>

src/router/index.ts

@@ -2,7 +2,7 @@
 import { RouteRecordRaw } from 'vue-router';
 import store from '@/store'
 import Tabs from '@/views/Tabs.vue'
 import OrderDetail from '@/views/OrderDetail.vue'
 import ProductDetail from '@/views/ProductDetail.vue'
 import ShipToStoreOrders from '@/views/ShipToStoreOrders.vue'
 import Notifications from '@/views/Notifications.vue'
@@ -15,6 +15,7 @@
 import 'vue-router'
 import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
 import { loader } from '@/utils/user';
+import OrderDetailUpdated from '@/views/OrderDetailUpdated.vue';
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -89,7 +90,7 @@
   {
     path: "/orderdetail/:orderType/:orderId/:orderPartSeqId",
     name: "OrderDetail",
-    component: OrderDetail,
+    component: OrderDetailUpdated,
     beforeEnter: authGuard,
     props: true,
     meta: {

src/services/OrderService.ts

@@ -1,4 +1,4 @@
 import { api, client, hasError } from '@/adapter';
 import emitter from '@/event-bus';
 import { translate } from '@hotwax/dxp-components';
 import store from '@/store';
@@ -347,7 +347,24 @@
   })
 }
 
+const performFind = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "post",
+    data: payload
+  });
+}
+
+const cancelItem = async (payload: any): Promise<any> => {
+  return api({
+    url: "cancelOrderItem",
+    method: "post",
+    data: payload
+  });
+}
+
 export const OrderService = {
+  cancelItem,
   fetchOrderItems,
   fetchOrderPaymentPreferences,
   fetchTrackingCodes,
@@ -368,6 +385,7 @@
   getCustomerContactDetails,
   getShippingPhoneNumber,
   packOrder,
+  performFind,
   printPicklist,
   printShippingLabelAndPackingSlip
 }

src/services/UtilService.ts

@@ -115,14 +115,32 @@ const isEnumExists = async (enumId: string): Promise<any> => {
   }
 }
 
+const fetchJobInformation = async (payload: any): Promise <any>  => {
+  return api({
+    url: "/findJobs",
+    method: "get",
+    params: payload
+  });
+}
+
+const getProcessRefundStatus = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "post",
+    data: payload
+  });
+}
+
 export const UtilService = {
   createEnumeration,
   createProductStoreSetting,
   fetchFacilityTypeInformation,
+  fetchJobInformation,
   fetchPartyInformation,
   fetchPaymentMethodTypeDesc,
   fetchRejectReasons,
   fetchStatusDesc,
+  getProcessRefundStatus,
   getProductStoreSettings,
   isEnumExists,
   resetPicker,