diff --git a/src/components/ConfirmCancelModal.vue b/src/components/ConfirmCancelModal.vue
new file mode 100644
index 000000000..4eeda2c2f
--- /dev/null
+++ b/src/components/ConfirmCancelModal.vue
@@ -0,0 +1,199 @@
+<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("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 } from "@hotwax/dxp-components";
+import { isKit } from "@/utils/order"
+import { hasError } from "@hotwax/oms-api";
+import { DateTime } from "luxon";
+import emitter from "@/event-bus";
+
+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() {
+      emitter.emit("presentLoader");
+      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 });
+      emitter.emit("dismissLoader");
+      this.closeModal();
+    }
+  },
+  setup() {
+    const store = useStore();
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+
+    return {
+      closeOutline,
+      isKit,
+      getProductIdentificationValue,
+      productIdentificationPref,
+      saveOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/src/components/ReportAnIssuePopover.vue b/src/components/ReportAnIssuePopover.vue
new file mode 100644
index 000000000..7e5dee84f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index a37d286d1..84244b307 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,6 +5,7 @@
   "Allow partial rejection": "Allow partial rejection",
   "An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.": "An email notification will be sent to { customerName } that their order is ready for pickup.{ space } This order will also be moved to the packed orders tab.",
   "An email notification will be sent to that their order is ready for pickup.": "An email notification will be sent to { customerName } that their order is ready for pickup.",
+  "Approved for fulfillment": "Approved for fulfillment",
   "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",
@@ -12,11 +13,18 @@
   "Available to promise": "Available to promise",
   "Authenticating": "Authenticating",
   "Assign Pickers": "Assign Pickers",
+  "Assigned for fulfillment": "Assigned for fulfillment",
+  "Authorized": "Authorized",
   "Browser TimeZone": "Browser TimeZone",
   "Browser time zone": "Browser time zone",
   "Catalog": "Catalog",
   "Cancel": "Cancel",
+  "Cancel items": "Cancel items",
   "Cancel order before fulfillment": "Cancel order before fulfillment",
+  "Cancelation and refund sync to Shopify is enabled.": "Cancelation and refund sync to Shopify is enabled.",
+  "Cancelation and refund sync to Shopify is not enabled.": "Cancelation and refund sync to Shopify is not enabled.",
+  "Cancelation not syncing to Shopify": "Cancelation not syncing to Shopify",
+  "Cancelation sync to Shopify is enabled. Refund processing is disabled.": "Cancelation sync to Shopify is enabled. Refund processing is disabled.",
   "canceled from the order": "canceled from the order",
   "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.": "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.",
   "Change": "Change",
@@ -25,6 +33,7 @@
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "Color:": "Color: {color}",
   "Colors": "Colors",
+  "Confirm Cancelation": "Confirm Cancelation",
   "Complete": "Complete",
   "Completed": "Completed",
   "Configuration updated": "Configuration updated",
@@ -32,6 +41,7 @@
   "Copied": "Copied { text }",
   "Copied to clipboard": "Copied to clipboard",
   "Copy": "Copy",
+  "Created in Shopify": "Created in Shopify",
   "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels.{ space } For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.",
   "Delivery address": "Delivery address",
   "Delivery method": "Delivery method",
@@ -41,6 +51,8 @@
   "Edit pickers": "Edit pickers",
   "Email sent successfully": "Email sent successfully",
   "Enable tracking": "Enable tracking",
+  "Estimated time to cancelation on Shopify": "Estimated time to cancelation on Shopify",
+  "Estimated time to refund customer on Shopify": "Estimated time to refund customer on Shopify",
   "Facility": "Facility",
   "Failed to load packing slip": "Failed to load packing slip",
   "Failed to update configuration": "Failed to update configuration",
@@ -56,6 +68,7 @@
   "Handover": "Handover",
   "Handling Instructions": "Handling Instructions",
   "If you cannot fulfill this order, will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.": "If you cannot fulfill this order, {customerName} will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.",
+  "Imported from Shopify": "Imported from Shopify",
   "Inactive store": "Inactive store",
   "in stock": "in stock",
   "Incoming": "Incoming",
@@ -65,8 +78,10 @@
   "Inventory": "Inventory",
   "Inventory computation": "Inventory computation",
   "Item has been rejected successfully.": "Item has been rejected successfully.",
+  "Kit": "Kit",
   "Language": "Language",
   "Last name": "Last name",
+  "Latest": "Latest",
   "Learn more about unfillable items": "Learn more about unfillable items",
   "Loading": "Loading",
   "Login": "Login",
@@ -79,6 +94,7 @@
   "No facilities found": "No facilities found",
   "No items found": "No items found",
   "No inventory details found": "No inventory details found",
+  "No payments found": "No payments found",
   "No products found": "No products found",
   "No notifications to show": "No notifications to show",
   "No picker assigned.": "No picker assigned.",
@@ -99,6 +115,7 @@
   "on hand": "{ count } on hand",
   "Other stores inventory": "Other stores inventory",
   "Order": "Order",
+  "Order completed": "Order completed",
   "Order delivered to": "Order delivered to { customerName }",
   "Order details": "Order details",
   "Order edit permissions": "Order edit permissions",
@@ -127,10 +144,14 @@
   "Packing slips help customer reconcile their order against the delivered items.": "Packing slips help customer reconcile their order against the delivered items.",
   "Partial Order rejection": "Partial Order rejection",
   "Password": "Password",
+  "Payment": "Payment",
   "Pending allocation": "Pending allocation",
   "pending approval": "pending approval",
   "Picked by": "Picked by { pickers }",
+  "Picked up": "Picked up",
+  "Pickup remainder": "Pickup remainder",
   "Pick up location": "Pick up location",
+  "Picker assigned": "Picker assigned",
   "Pickers successfully replaced in the picklist with the new selections.": "Pickers successfully replaced in the picklist with the new selections.",
   "pieces in stock": "pieces in stock",
   "Print picklists": "Print picklists",
@@ -144,6 +165,8 @@
   "Ready to create an app?": "Ready to create an app?",
   "Ready to ship": "Ready to ship",
   "Reject": "Reject",
+  "Rejected": "Rejected",
+  "Reject Items": "Reject Items",
   "Reject Order": "Reject Order",
   "Reject Order Item": "Reject Order Item",
   "Reason": "Reason",
@@ -179,6 +202,7 @@
   "Ship to this address": "Ship to this address",
   "Shop": "Shop",
   "Show shipping orders": "Show shipping orders",
+  "Showing the next estimated time to sync cancelation to Shopify": "Showing the next estimated time to sync cancelation to Shopify",
   "Size:": "Size: {size}",
   "Sizes": "Sizes",
   "Something went wrong": "Something went wrong",
@@ -193,13 +217,16 @@
   "Staff": "Staff",
   "Street": "Street",
   "Store": "Store",
+  "Summary": "Summary",
   "Timezone": "Timezone",
+  "Timeline": "Timeline",
   "Time zone updated successfully": "Time zone updated successfully",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.",
   "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.": "This is the name of the OMS you are connected to right now. Make sure that you are connected to the right instance before proceeding.",
   "Selected variant not available": "Selected variant not available",
   "This order cannot be split. If you cannot fulfill any item, will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.": "This order cannot be split. If you cannot fulfill any item, { customerName } will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.",
   "This order will be rejected from this store with the selected reason and shipped to the address that has been inputed.Please make sure the address you have entered is correct.": "This order will be rejected from this store with the selected reason and shipped to the address that has been inputed. { space } Please make sure the address you have entered is correct.",
+  "Total": "Total",
   "Track Pickers": "Track Pickers",
   "Track who picked orders by entering picker IDs when packing an order.": "Track who picked orders by entering picker IDs when packing an order.",
   "Unable to open as browser is blocking pop-ups.": "Unable to open { documentName } as browser is blocking pop-ups.",
@@ -213,6 +240,7 @@
   "Update notification preferences": "Update notification preferences",
   "units": "{ item } units",
   "unit": "{ item } unit",
+  "Verify that the items in the package are valid and the customer has received their order. Once the order is handed over to the customer it cannot be undone.": "Verify that the items in the package are valid and the customer has received their order.{ space }Once the order is handed over to the customer it cannot be undone.",
   "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"
diff --git a/src/locales/es.json b/src/locales/es.json
index b1ae18b54..fb7da14a9 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -5,6 +5,7 @@
   "Allow partial rejection": "Permitir rechazo parcial",
   "An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.": "Se enviará una notificación por correo electrónico a {customerName} de que su pedido está listo para recoger.{ space } Este pedido también se moverá a la pestaña de pedidos empacados.",
   "An email notification will be sent to that their order is ready for pickup.": "Se enviará una notificación por correo electrónico a {customerName} de que su pedido está listo para recoger.",
+  "Approved for fulfillment": "Approved for fulfillment",
   "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ó",
@@ -12,11 +13,18 @@
   "Available to promise": "Available to promise",
   "Authenticating": "Autenticación",
   "Assign Pickers": "Asignar recolectores",
+  "Assigned for fulfillment": "Assigned for fulfillment",
+  "Authorized": "Authorized",
   "Browser TimeZone": "Browser TimeZone",
   "Browser time zone": "Browser time zone",
   "Catalog": "Catálogo",
   "Cancel": "Cancelar",
+  "Cancel items": "Cancel items",
   "Cancel order before fulfillment": "Cancelar pedido antes del cumplimiento",
+  "Cancelation and refund sync to Shopify is enabled.": "Cancelation and refund sync to Shopify is enabled.",
+  "Cancelation and refund sync to Shopify is not enabled.": "Cancelation and refund sync to Shopify is not enabled.",
+  "Cancelation not syncing to Shopify": "Cancelation not syncing to Shopify",
+  "Cancelation sync to Shopify is enabled. Refund processing is disabled.": "Cancelation sync to Shopify is enabled. Refund processing is disabled.",
   "canceled from the order": "cancelado del pedido",
   "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.": "Controle lo que sus clientes pueden editar en su pedido cuando editan su pedido en Reenrutar el cumplimiento.",
   "Change": "Cambiar",
@@ -24,6 +32,7 @@
   "City": "Ciudad",
   "Click the backdrop to dismiss.": "Haz clic en el fondo para cerrar.",
   "Colors": "Colores",
+  "Confirm Cancelation": "Confirm Cancelation",
   "Complete": "Completar",
   "Completed": "Completado",
   "Configuration updated": "Configuración actualizada",
@@ -31,6 +40,7 @@
   "Copied": "Copiado { text }",
   "Copied to clipboard": "Copiado al portapapeles",
   "Copy": "Copiar",
+  "Created in Shopify": "Created in Shopify",
   "Depending on the reason you select for not fulfilling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "Dependiendo de la razón que selecciones para no cumplir con un artículo, se registrará una variación de inventario y se actualizarán todos los canales de ventas con nuevos niveles de inventario. { space } Por ejemplo, al seleccionar “No disponible en el inventario” HotWax Commerce dejará de dirigir los pedidos para él a tu tienda y los clientes no podrán hacer pedidos BOPIS para él en tu tienda en Shopify.",
   "Delivery address": "Dirección de entrega",
   "Delivery method": "Método de entrega",
@@ -39,6 +49,8 @@
   "Edit pickers": "Editar recolectores",
   "Email sent successfully": "Correo enviado satisfactoriamente",
   "Enable tracking": "Habilitar seguimiento",
+  "Estimated time to cancelation on Shopify": "Estimated time to cancelation on Shopify",
+  "Estimated time to refund customer on Shopify": "Estimated time to refund customer on Shopify",
   "Facility": "Instalación",
   "Failed to load packing slip": "Error al cargar el documento de embalaje",
   "Failed to update configuration": "No se pudo actualizar la configuración",
@@ -53,6 +65,7 @@
   "Go to Launchpad": "Ir a la plataforma de lanzamiento",
   "Handover": "Entregar",
   "Handling Instructions": "Instrucciones de manejo",
+  "Imported from Shopify": "Imported from Shopify",
   "Inactive store": "Tienda inactiva",
   "in stock": "en stock",
   "Incoming": "Entrante",
@@ -62,8 +75,10 @@
   "Inventory": "Inventario",
   "Inventory computation": "Inventory computation",
   "Item has been rejected successfully.": "El artículo ha sido rechazado exitosamente.",
+  "Kit": "Kit",
   "Language": "Idioma",
   "Last name": "Apellido",
+  "Latest": "Latest",
   "Learn more about unfillable items": "Obtenga más información sobre artículos que no se pueden cumplir",
   "Loading": "Cargando",
   "Login": "Iniciar sesión",
@@ -76,6 +91,7 @@
   "No facilities found": "No facilities found",
   "No items found": "No se encontraron artículos",
   "No inventory details found": "No se encontraron detalles de inventario",
+  "No payments found": "No payments found",
   "No products found": "No se encontraron productos",
   "No notifications to show": "No hay notificaciones para mostrar",
   "No picker assigned.": "No hay recolector asignado.",
@@ -96,6 +112,7 @@
   "on hand": "{ count } on hand",
   "Other stores inventory": "Inventario de otras tiendas",
   "Order": "Orden",
+  "Order completed": "Order completed",
   "Order delivered to": "Orden entregada a {customerName}",
   "Order details": "Detalles de la orden",
   "Order edit permissions": "Permisos de edición de la orden",
@@ -124,10 +141,14 @@
   "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.",
   "Partial Order rejection": "Rechazo parcial del pedido",
   "Password": "Contraseña",
+  "Payment": "Payment",
   "Pending allocation": "Pending allocation",
   "pending approval": "pendiente de aprobación",
   "Picked by": "Recogido por { pickers }",
+  "Picked up": "Picked up",
+  "Pickup remainder": "Pickup remainder",
   "Pick up location": "Ubicación de recogida",
+  "Picker assigned": "Picker assigned",
   "Pickers successfully replaced in the picklist with the new selections.": "Los recolectores fueron reemplazados exitosamente en la lista de selección con las nuevas selecciones.",
   "pieces in stock": "piezas en inventario",
   "Print picklists": "Print picklists",
@@ -141,6 +162,8 @@
   "Ready to create an app?": "¿Listo para crear una aplicación?",
   "Ready to ship": "Listo para enviar",
   "Reject": "Rechazar",
+  "Rejected": "Rejected",
+  "Reject Items": "Reject Items",
   "Reject Order": "Rechazar pedido",
   "Reject Order Item": "Rechazar artículo de pedido",
   "Reason": "Razón",
@@ -176,6 +199,7 @@
   "Ship to this address": "Enviar a esta dirección",
   "Shop": "Comprar",
   "Show shipping orders": "Mostrar órdenes de envío",
+  "Showing the next estimated time to sync cancelation to Shopify": "Showing the next estimated time to sync cancelation to Shopify",
   "Sizes": "Tamaños",
   "Something went wrong": "Algo salió mal",
   "Something went wrong, could not edit picker.": "Algo salió mal, no se pudo editar el recolector.",
@@ -190,6 +214,8 @@
   "Staff": "Personal",
   "Street": "Calle",
   "Store": "Tienda",
+  "Summary": "Summary",
+  "Timeline": "Timeline",
   "Timezone": "Zona horaria",
   "Time zone updated successfully": "Zona horaria actualizada exitosamente",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "La zona horaria que selecciones se utiliza para garantizar que las automatizaciones que programaste siempre sean precisas en la hora que seleccionaste.",
@@ -197,6 +223,7 @@
   "Selected variant not available": "Variante seleccionada no disponible",
   "This order cannot be split. If you cannot fulfill any item, an email will be sent with alternate fulfillment options, and this order will be removed from your dashboard.": "Este pedido no se puede dividir. Si no puedes cumplir con algún artículo, { customerName } se enviará un correo electrónico con opciones de cumplimiento alternativas y este pedido se eliminará de tu panel de control.",
   "This order will be rejected from this store with the selected reason and shipped to the address that has been inputted. Please make sure the address you have entered is correct.": "Este pedido será rechazado en esta tienda con la razón seleccionada y se enviará a la dirección que se ha ingresado.{ space } Por favor, asegúrate de que la dirección que has ingresado sea correcta.",
+  "Total": "Total",
   "Track Pickers": "Seguimiento de recolectores",
   "Track who picked orders by entering picker IDs when packing an order.": "Realiza un seguimiento de quién recogió los pedidos ingresando los ID de los recolectores al empacar un pedido.",
   "Unable to open as browser is blocking pop-ups.": "No se puede abrir {documentName} porque el navegador bloquea las ventanas emergentes.",
@@ -210,6 +237,7 @@
   "Update notification preferences": "Actualizar preferencias de notificación",
   "units": "{ item } units",
   "unit": "{ item } unit",
+  "Verify that the items in the package are valid and the customer has received their order. Once the order is handed over to the customer it cannot be undone.": "Verify that the items in the package are valid and the customer has received their order.{ space }Once the order is handed over to the customer it cannot be undone.",
   "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",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 053f46d0d..b1b420a48 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -5,6 +5,7 @@
   "Allow partial rejection": "部分的な拒否を許可します",
   "An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.": "{ customerName }様宛に注文の受け取り準備が完了したことをお知らするメールが送信されます。{ space } この注文は「梱包済み注文」タブに移動されます.",
   "An email notification will be sent to that their order is ready for pickup.": "{ customerName }様宛に注文の受け取り準備が完了したことをお知らするメールが送信されます。",
+  "Approved for fulfillment": "Approved for fulfillment",
   "Are you sure you want to change the time zone to?": "タイムゾーンを変更してもよろしいですか？",
   "Are you sure you want to update the notification preferences?": "通知設定を更新してもよろしいですか？",
   "Arrived": "到着",
@@ -12,18 +13,26 @@
   "Available to promise": "引当可能在庫",
   "Authenticating": "認証中",
   "Assign Pickers": "受け取り人の割当",
+  "Assigned for fulfillment": "Assigned for fulfillment",
+  "Authorized": "Authorized",
   "Browser TimeZone": "ブラウザーのタイムゾーン",
   "Browser time zone": "ブラウザーのタイムゾーン",
   "Catalog": "カタログ",
   "Cancel": "キャンセル",
+  "Cancel items": "Cancel items",
   "Cancel order before fulfillment": "注文のキャンセル",
   "canceled from the order": "注文がキャンセルされました",
+  "Cancelation and refund sync to Shopify is enabled.": "Cancelation and refund sync to Shopify is enabled.",
+  "Cancelation and refund sync to Shopify is not enabled.": "Cancelation and refund sync to Shopify is not enabled.",
+  "Cancelation not syncing to Shopify": "Cancelation not syncing to Shopify",
+  "Cancelation sync to Shopify is enabled. Refund processing is disabled.": "Cancelation sync to Shopify is enabled. Refund processing is disabled.",
   "Control what your customers are allowed to edit on their order when they are editing their order on Re-route Fulfillment.": "お客様がリルート（受取方法や受取場所の変更）で注文を編集する際に、注文の編集を許可する内容を制御します。",
   "Change": "変更",
   "Choose language": "言語を選択",
   "City": "街",
   "Click the backdrop to dismiss.": "背景をクリックして閉じます。",
   "Colors": "色",
+  "Confirm Cancelation": "Confirm Cancelation",
   "Complete": "完了",
   "Completed": "完了",
   "Configuration updated": "設定の更新",
@@ -31,6 +40,7 @@
   "Copied": "コピーされた{ text }",
   "Copied to clipboard": "クリップボードにコピーしました",
   "Copy": "コピー",
+  "Created in Shopify": "Created in Shopify",
   "Depending on the reason you select for not fulfulling an item, an inventory variance will be recorded and all sales channels will be updated with new inventory levels. For example, by selecting “Not in stock” HotWax Commerce will stop routing orders for it to your store and customers will not be able to place BOPIS orders for it at your store on Shopify.": "アイテムをフルフィルメントしないために選択した理由に応じて、在庫差異が記録され、すべての販売チャネルが新しい在庫レベルで更新されます。{ space } たとえば、[在庫なし] を選択すると、HotWax Commerce はストアへの注文のルーティングを停止し、顧客は 貴方の Shopify のストアで BOPIS 注文を行うことができなくなります。",
   "Delivery address": "お届け先住所",
   "Delivery method": "配送方法",
@@ -39,6 +49,8 @@
   "Edit pickers": "編集ピッカー",
   "Email sent successfully": "メールの送信が完了しました。",
   "Enable tracking": "追跡を有効",
+  "Estimated time to cancelation on Shopify": "Estimated time to cancelation on Shopify",
+  "Estimated time to refund customer on Shopify": "Estimated time to refund customer on Shopify",
   "Facility": "拠点",
   "Failed to load packing slip": "納品書の読み込みに失敗しました",
   "Failed to update configuration": "設定の更新に失敗しました",
@@ -53,6 +65,7 @@
   "Go to Launchpad": "Launchpadへ移動",
   "Handover": "引き継ぐ",
   "Handling Instructions": "取扱説明",
+  "Imported from Shopify": "Imported from Shopify",
   "Inactive store": "休止店舗",
   "in stock": "在庫あり",
   "Incoming": "移動中",
@@ -62,8 +75,10 @@
   "Inventory": "在庫",
   "Inventory computation": "在庫計算",
   "Item has been rejected successfully.": "商品は正常に拒否されました。",
+  "Kit": "Kit",
   "Language": "言語",
   "Last name": "姓",
+  "Latest": "Latest",
   "Learn more about unfillable items": "記入できない項目の詳細",
   "Loading": "読み込み中",
   "Login": "ログイン",
@@ -76,6 +91,7 @@
   "No facilities found": "No facilities found",
   "No items found": "アイテムが見つかりませんでした",
   "No inventory details found": "在庫の詳細が見つかりません",
+  "No payments found": "No payments found",
   "No products found": "商品が見つかりません",
   "No notifications to show": "表示する通知はありません",
   "No picker assigned.": "ピッカーが割り当てられていません。",
@@ -96,6 +112,7 @@
   "on hand": "{count} 在庫あり",
   "Other stores inventory": "その他店舗在庫",
   "Order": "注文",
+  "Order completed": "Order completed",
   "Order delivered to": "注文は { customerName }様 に配達されました",
   "Order details": "注文詳細",
   "Order edit permissions": "注文の編集権限",
@@ -123,10 +140,14 @@
   "Packing slips help customer reconcile their order against the delivered items.": "内容明細票はお客様が注文と配送された商品を確認（照合）する際に役立ちます。",
   "Partial Order rejection": "部分的な注文拒否",
   "Password": "パスワード",
+  "Payment": "Payment",
   "Pending allocation": "Pending allocation",
   "pending approval": "承認待ち",
   "Picked by": "{pickers} によってピックアップされました",
+  "Picked up": "Picked up",
+  "Pickup remainder": "Pickup remainder",
   "Pick up location": "受取場所",
+  "Picker assigned": "Picker assigned",
   "Pickers successfully replaced in the picklist with the new selections.": "ピッカーは新しい選択によりピックリストで正常に置き換えられました。",
   "pieces in stock": "在庫あり",
   "Print picklists": "Print picklists",
@@ -140,6 +161,8 @@
   "Ready to create an app?": "アプリを作成する準備はできましたか?",
   "Ready to ship": "出荷する準備ができました",
   "Reject": "Reject",
+  "Rejected": "Rejected",
+  "Reject Items": "Reject Items",
   "Reject Order": "注文を拒否",
   "Reject Order Item": "Reject Order Item",
   "Reason": "理由",
@@ -175,6 +198,7 @@
   "Ship to this address": "この住所に配送",
   "Shop": "ショップ",
   "Show shipping orders": "出荷オーダーの表示",
+  "Showing the next estimated time to sync cancelation to Shopify": "Showing the next estimated time to sync cancelation to Shopify",
   "Sizes": "サイズ",
   "Something went wrong": "エラーが発生しました",
   "Something went wrong, could not edit picker.": "問題が発生しました。ピッカーを編集できませんでした。",
@@ -188,6 +212,8 @@
   "Staff": "スタッフ",
   "Street": "市区町村",
   "Store": "ストア",
+  "Summary": "Summary",
+  "Timeline": "Timeline",
   "Timezone": "タイムゾーン",
   "Time zone updated successfully": "タイムゾーンの更新成功",
   "The timezone you select is used to ensure automations you schedule are always accurate to the time you select.": "あなたが選択したタイムゾーンは、あなたがスケジュールしたオートメーション（自動操作）が常にあなたが選択した時間に正確であることを保証するために使用されます。",
@@ -195,6 +221,7 @@
   "Selected variant not available": "選択したバリアントは利用できません",
   "This order cannot be split. If you cannot fulfill any item, will be sent an email with alternate fulfillment options and this order will be removed from your dashboard.": "この注文は分割できません。どのアイテムもフィフィルできない場合、{ customerName } に別の発送オプションを記載したメールが送信され、ダッシュボードから注文が削除されます。",
   "This order will be rejected from this store with the selected reason and shipped to the address that has been inputed.Please make sure the address you have entered is correct.": "この注文は、選択された理由によりこのストアから拒否され、入力された住所に発送されます。{ space } 入力したアドレスが正しいことを確認してください。",
+  "Total": "Total",
   "Track Pickers": "受取人の追跡",
   "Track who picked orders by entering picker IDs when packing an order.": "注文を梱包する際に受取人IDを入力することで、誰が注文を受け取ったかを追跡できます。",
   "Unable to open as browser is blocking pop-ups.": "ブラウザーがポップアップをブロックしているため、{documentName} を開くことができません。",
@@ -208,6 +235,7 @@
   "Update notification preferences": "Update notification preferences",
   "units": "{ item }個",
   "unit": "{ item }個",
+  "Verify that the items in the package are valid and the customer has received their order. Once the order is handed over to the customer it cannot be undone.": "Verify that the items in the package are valid and the customer has received their order.{ space }Once the order is handed over to the customer it cannot be undone.",
   "View shipping orders along with pickup orders.": "店舗受取の注文と一緒に配送注文を表示します",
   "You do not have permission to access this page": "このページにアクセスする権限がありません",
   "Zipcode": "郵便番号"
diff --git a/src/router/index.ts b/src/router/index.ts
index 61bb86b32..fb9bc9898 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,6 +15,7 @@ import { translate } from '@hotwax/dxp-components'
 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 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/orderdetail/:orderType/:orderId/:orderPartSeqId",
     name: "OrderDetail",
-    component: OrderDetail,
+    component: OrderDetailUpdated,
     beforeEnter: authGuard,
     props: true,
     meta: {
diff --git a/src/services/OrderService.ts b/src/services/OrderService.ts
index fcc947714..d0290c4c5 100644
--- a/src/services/OrderService.ts
+++ b/src/services/OrderService.ts
@@ -1,4 +1,4 @@
-import { api, client, hasError } from '@/adapter';
+import { api, hasError } from '@/adapter';
 import emitter from '@/event-bus';
 import { translate } from '@hotwax/dxp-components';
 import store from '@/store';
@@ -347,7 +347,24 @@ const packOrder = async (payload: any): Promise<any> => {
   })
 }
 
+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 @@ export const OrderService = {
   getCustomerContactDetails,
   getShippingPhoneNumber,
   packOrder,
+  performFind,
   printPicklist,
   printShippingLabelAndPackingSlip
 }
\ No newline at end of file
diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
index fc5877bec..319677eb5 100644
--- a/src/services/UtilService.ts
+++ b/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,
diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
index 1e0393504..24802e596 100644
--- a/src/store/modules/order/actions.ts
+++ b/src/store/modules/order/actions.ts
@@ -159,7 +159,8 @@ const actions: ActionTree<OrderState , RootState> ={
                     productId: item.productId,
                     facilityId: item.facilityId,
                     quantity: item.itemQuantity,
-                    inventoryItemId: item.inventoryItemId
+                    inventoryItemId: item.inventoryItemId,
+                    showKitComponents: false
                   }]
                 })
               } else {
@@ -170,7 +171,8 @@ const actions: ActionTree<OrderState , RootState> ={
                   productId: item.productId,
                   facilityId: item.facilityId,
                   quantity: item.itemQuantity,
-                  inventoryItemId: item.inventoryItemId
+                  inventoryItemId: item.inventoryItemId,
+                  showKitComponents: false
                 })
               }
 
@@ -180,6 +182,14 @@ const actions: ActionTree<OrderState , RootState> ={
             shippingInstructions: orderItem.shippingInstructions,
             shipGroupSeqId: orderItem.shipGroupSeqId,
             isPicked: orderItem.isPicked,
+            pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
+              names.push(picker.split('/')[1]);
+              return names;
+            }, [])).join(', ') : "",
+            pickerIds: orderItem.pickers ? (orderItem.pickers.reduce((ids: any, picker: string) => {
+              ids.push(picker.split('/')[0]);
+              return ids;
+            }, [])) : "",
             picklistId: orderItem.picklistId,
             picklistBinId: orderItem.picklistBinId
           }
@@ -203,10 +213,196 @@ const actions: ActionTree<OrderState , RootState> ={
     return resp;
   },
 
-  async getOrderDetail({ dispatch, state }, { payload, orderType }) {
+  async fetchAdditionalOrderInformation({ dispatch }, orderDetails) {
+    let order = orderDetails;
+    const orderId = order.orderId
+
+    try {
+      const apiPayload = [{
+        inputFields: {
+          orderId
+        },
+        viewSize: 50,
+        filterByDate: "Y",
+        entityName: "OrderHeaderAndRoles"
+      }, {
+        inputFields: {
+          orderId,
+          contactMechPurposeTypeId: ["BILLING_LOCATION", "BILLING_EMAIL", "PHONE_BILLING"],
+          contactMechPurposeTypeId_op: "in"
+        },
+        viewSize: 50,
+        fieldList: ["contactMechPurposeTypeId", "contactMechId"],
+        entityName: "OrderContactMech"
+      }, {
+        inputFields: {
+          orderId
+        },
+        viewSize: 50,
+        filterByDate: "Y",
+        fieldList: ["orderIdentificationTypeId", "orderId", "idValue"],
+        entityName: "OrderIdentification"
+      }, {
+        inputFields: {
+          orderId,
+          attrName: ["customerId", "municipio"],
+          attrName_op: "in",
+          attrName_ic: "Y"
+        },
+        viewSize: 50,
+        fieldList: ["attrName", "attrValue"],
+        entityName: "OrderAttribute"
+      }, {
+        inputFields: {
+          orderId,
+          statusId: ["ORDER_COMPLETED", "ORDER_APPROVED"],
+          statusId_op: "in"
+        },
+        viewSize: 2,
+        entityName: "OrderStatus"
+      }, {
+        inputFields: {
+          orderId,
+          statusId: "PAYMENT_CANCELLED",
+          statusId_op: "notEqual"
+        },
+        orderBy: "createdDate DESC",
+        viewSize: 50,
+        fieldList: ["paymentMethodTypeId", "maxAmount", "statusId"],
+        entityName: "OrderPaymentPreference"
+      }, {
+        inputFields: {
+          orderId
+        },
+        viewSize: 50,
+        entityName: "OrderItemShipGroupAndFacility"
+      }]
+
+      const [orderHeader, orderContactMech, orderIdentifications, orderAttributes, orderStatusInfo, orderPaymentPreference] = await Promise.allSettled(apiPayload.map((payload: any) => OrderService.performFind(payload)))
+
+      if(orderHeader.status === "fulfilled" && !hasError(orderHeader.value) && orderHeader.value.data.count > 0) {
+        order = {
+          ...order,
+          ...orderHeader.value.data.docs[0]
+        }
+
+        if(!order.orderId) {
+          throw "Failed to fetch order information"
+        }
+      }
+      if(orderContactMech.status === "fulfilled" && !hasError(orderContactMech.value) && orderContactMech.value.data.count > 0) {
+        const orderContactMechTypes: any = orderContactMech.value.data.docs.reduce((contactMechTypes: any, contactMech: any) => {
+          contactMechTypes[contactMech.contactMechPurposeTypeId] = contactMech.contactMechId
+
+          return contactMechTypes;
+        }, {})
+
+        const postalAddress = await OrderService.performFind({
+          inputFields: {
+            contactMechId: Object.keys(orderContactMechTypes).filter((mechType: string) => mechType === "BILLING_LOCATION").map((mechType: string) => orderContactMechTypes[mechType]),
+            contactMechId_op: "in"
+          },
+          viewSize: 20,
+          entityName: "PostalAddressAndGeo"
+        })
+
+        if(!hasError(postalAddress) && postalAddress.data.count > 0) {
+          postalAddress.data.docs.map((address: any) => {
+            if(address.contactMechId === orderContactMechTypes["BILLING_LOCATION"]) {
+              order["billingAddress"] = address
+            }
+          })
+        }
+
+        const customerInfo = await OrderService.performFind({
+          inputFields: {
+            contactMechId: Object.keys(orderContactMechTypes).filter((mechType: string) => mechType === "BILLING_EMAIL" || mechType === "PHONE_BILLING").map((mechType: string) => orderContactMechTypes[mechType]),
+            contactMechId_op: "in"
+          },
+          viewSize: 20,
+          fieldList: ["infoString", "contactMechId", "tnContactNumber"],
+          entityName: "ContactMechDetail"
+        })
+
+        if(!hasError(customerInfo) && customerInfo.data.count > 0) {
+          customerInfo.data.docs.map((info: any) => {
+            if(info.contactMechId === orderContactMechTypes["BILLING_EMAIL"]) {
+              order["billingEmail"] = info.infoString
+            }
+
+            if(info.contactMechId === orderContactMechTypes["PHONE_BILLING"]) {
+              order["billingPhone"] = info.tnContactNumber
+            }
+          })
+        }
+      }
+
+      // Fetching order identifications
+      if(orderIdentifications.status === "fulfilled" && !hasError(orderIdentifications.value) && orderIdentifications.value.data.count > 0) {
+        order["shopifyOrderId"] = orderIdentifications.value.data.docs.find((identification: any) => identification.orderIdentificationTypeId === "SHOPIFY_ORD_ID")?.idValue
+      }
+
+      // Fetching order attributes
+      order["orderAttributes"] = {}
+      if(orderAttributes.status === "fulfilled" && !hasError(orderAttributes.value) && orderAttributes.value.data.count > 0) {
+        orderAttributes.value.data.docs.map((attribute: any) => {
+          // For some attbiutes we get casing difference, like customerId, CustomerId, so adding ic in performFind, but to display it correctly on UI, converting it into lowerCase
+          order["orderAttributes"][attribute.attrName.toLowerCase()] = attribute.attrValue
+        })
+      }
+
+      // Fetching brokering information for order
+      if(orderStatusInfo.status === "fulfilled" && !hasError(orderStatusInfo.value) && orderStatusInfo.value.data.count > 0) {
+        order["approvedDate"] = orderStatusInfo.value.data.docs.find((info: any) => info.statusId === "ORDER_APPROVED")?.statusDatetime
+        order["completedDate"] = orderStatusInfo.value.data.docs.find((info: any) => info.statusId === "ORDER_COMPLETED")?.statusDatetime
+      }
+
+      // Fetching payment preference for order
+      if(orderPaymentPreference.status === "fulfilled" && !hasError(orderPaymentPreference.value) && orderPaymentPreference.value.data.count > 0) {
+        const paymentMethodTypeIds: Array<string> = [];
+        const statusIds: Array<string> = [];
+        order["orderPayments"] = orderPaymentPreference.value.data.docs.map((paymentPreference: any) => {
+          paymentMethodTypeIds.push(paymentPreference.paymentMethodTypeId)
+          statusIds.push(paymentPreference.statusId)
+          return {
+            amount: paymentPreference["maxAmount"],
+            methodTypeId: paymentPreference["paymentMethodTypeId"],
+            paymentStatus: paymentPreference["statusId"]
+          }
+        })
+
+        this.dispatch("util/fetchStatusDesc", statusIds)
+
+        if(paymentMethodTypeIds.length) {
+          this.dispatch("util/fetchPaymentMethodTypeDesc", paymentMethodTypeIds)
+        }
+      }
+
+      if(order.picklistId) {
+        const picklistInfo = await OrderService.performFind({
+          inputFields: {
+            picklistId: order.picklistId,
+          },
+          viewSize: 1,
+          entityName: "Picklist",
+          fieldList: ["picklistId", "picklistDate"]
+        })
+
+        if(!hasError(picklistInfo) && picklistInfo.data.count > 0) {
+          order["picklistDate"] = picklistInfo.data.docs[0].picklistDate
+        }
+      }
+    } catch(err) {
+      logger.error(err)
+    }
+
+    await dispatch('updateCurrent', { order })
+  },
+
+  async getOrderDetail({ dispatch }, { payload, orderType }) {
     if(orderType === 'open') {
       payload['orderStatusId'] = "ORDER_APPROVED"
-      payload['-shipmentStatusId'] = "*"
+      payload['-shipmentStatusId'] = "(SHIPMENT_PACKED OR SHIPMENT_SHIPPED)"
       payload['-fulfillmentStatus'] = '(Cancelled OR Rejected)'
     } else if(orderType === 'packed') {
       payload['shipmentStatusId'] = "SHIPMENT_PACKED"
@@ -219,24 +415,24 @@ const actions: ActionTree<OrderState , RootState> ={
       return;
     }
 
-    const current = state.current as any
-    const orders = JSON.parse(JSON.stringify(state.open.list)) as any
-    // As one order can have multiple parts thus checking orderId and partSeq as well before making any api call
-    if(current.orderId === payload.orderId && current.orderType === orderType && current.part?.orderPartSeqId === payload.orderPartSeqId) {
-      await this.dispatch('product/getProductInformation', { orders: [ current ] })
-      await dispatch('fetchShipGroupForOrder');
-      return current 
-    }
-    if(orders.length) {
-      const order = orders.find((order: any) => {
-        return order.orderId === payload.orderId;
-      })
-      if(order) {
-        await dispatch('updateCurrent', { order })
-        return order;
-      }
-    }
-
+    // const current = state.current as any
+    // const orders = JSON.parse(JSON.stringify(state.open.list)) as any
+    // // As one order can have multiple parts thus checking orderId and partSeq as well before making any api call
+    // if(current.orderId === payload.orderId && current.orderType === orderType && current.part?.orderPartSeqId === payload.orderPartSeqId) {
+    //   await this.dispatch('product/getProductInformation', { orders: [ current ] })
+    //   // TODO: if we can store additional order information and just fetch shipGroup info as it was previously
+    //   await dispatch("fetchAdditionalOrderInformation", current)
+    //   return current
+    // }
+    // if(orders.length) {
+    //   const order = orders.find((order: any) => {
+    //     return order.orderId === payload.orderId;
+    //   })
+    //   if(order) {
+    //     await dispatch("fetchAdditionalOrderInformation", order)
+    //     return order;
+    //   }
+    // }
 
     const orderQueryPayload = prepareOrderQuery({
       ...payload,
@@ -254,6 +450,7 @@ const actions: ActionTree<OrderState , RootState> ={
           return {
             orderId: orderItem.orderId,
             orderName: orderItem.orderName,
+            shipmentId: orderItem.shipmentId,
             customer: {
               partyId: orderItem.customerId,
               name: orderItem.customerName
@@ -272,7 +469,11 @@ const actions: ActionTree<OrderState , RootState> ={
                     orderItemSeqId: item.orderItemSeqId,
                     productId: item.productId,
                     facilityId: item.facilityId,
-                    quantity: item.itemQuantity
+                    quantity: item.itemQuantity,
+                    showKitComponents: false,
+                    shipGroupSeqId: item.shipGroupSeqId,
+                    orderId: orderItem.orderId,
+                    inventoryItemId: item.inventoryItemId
                   }]
                 })
               } else {
@@ -280,13 +481,18 @@ const actions: ActionTree<OrderState , RootState> ={
                   orderItemSeqId: item.orderItemSeqId,
                   productId: item.productId,
                   facilityId: item.facilityId,
-                  quantity: item.itemQuantity
+                  quantity: item.itemQuantity,
+                  showKitComponents: false,
+                  shipGroupSeqId: item.shipGroupSeqId,
+                  orderId: orderItem.orderId,
+                  inventoryItemId: item.inventoryItemId
                 })
               }
 
               return arr
             }, [])),
             placedDate: orderItem.orderDate,
+            entryDate: orderItem.entryDate,
             shippingInstructions: orderItem.shippingInstructions,
             orderType: orderType,
             pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
@@ -297,7 +503,8 @@ const actions: ActionTree<OrderState , RootState> ={
               ids.push(picker.split('/')[0]);
               return ids;
             }, [])) : "",
-            picklistId: orderItem.picklistId
+            picklistId: orderItem.picklistId,
+            shipGroupSeqId: orderItem.shipGroupSeqId
           }
         })
 
@@ -313,14 +520,21 @@ const actions: ActionTree<OrderState , RootState> ={
       logger.error(err)
     }
 
-    await dispatch('updateCurrent', { order: currentOrder })
+    await dispatch("fetchAdditionalOrderInformation", currentOrder)
   },
-
+  
   async updateCurrent ({ commit, dispatch }, payload) {
     commit(types.ORDER_CURRENT_UPDATED, { order: payload.order })
     await dispatch('fetchShipGroupForOrder');
   },
 
+  // This action is added mainly to toggle the showKitComponent property for item from the order detail page
+  // TODO: check whether we can use this action instead of calling updateCurrent on order info update
+  // as calling update current again fetches the shipGroup info which is not required in all the cases.
+  async updateCurrentOrderInfo ({ commit }, order) {
+    commit(types.ORDER_CURRENT_UPDATED, { order })
+  },
+
   async updateOrderItemFetchingStatus ({ commit, state }, payload) {
     const order = state.current ? JSON.parse(JSON.stringify(state.current)) : {};
 
@@ -380,14 +594,16 @@ const actions: ActionTree<OrderState , RootState> ={
                   items: [{
                     orderItemSeqId: item.orderItemSeqId,
                     productId: item.productId,
-                    facilityId: item.facilityId
+                    facilityId: item.facilityId,
+                    showKitComponents: false
                   }]
                 })
               } else {
                 currentOrderPart.items.push({
                   orderItemSeqId: item.orderItemSeqId,
                   productId: item.productId,
-                  facilityId: item.facilityId
+                  facilityId: item.facilityId,
+                  showKitComponents: false
                 })
               }
 
@@ -462,24 +678,39 @@ const actions: ActionTree<OrderState , RootState> ={
               if (!currentOrderPart) {
                 arr.push({
                   orderPartSeqId: item.shipGroupSeqId,
+                  shipmentMethodEnum: {
+                    shipmentMethodEnumId: item.shipmentMethodTypeId,
+                    shipmentMethodEnumDesc: item.shipmentMethodTypeDesc
+                  },
                   items: [{
                     orderItemSeqId: item.orderItemSeqId,
                     productId: item.productId,
-                    facilityId: item.facilityId
+                    facilityId: item.facilityId,
+                    showKitComponents: false
                   }]
                 })
               } else {
                 currentOrderPart.items.push({
                   orderItemSeqId: item.orderItemSeqId,
                   productId: item.productId,
-                  facilityId: item.facilityId
+                  facilityId: item.facilityId,
+                  showKitComponents: false
                 })
               }
 
               return arr
             }, [])),
             placedDate: orderItem.orderDate,
-            shipGroupSeqId: orderItem.shipGroupSeqId
+            shipGroupSeqId: orderItem.shipGroupSeqId,
+            pickers: orderItem.pickers ? (orderItem.pickers.reduce((names: any, picker: string) => {
+              names.push(picker.split('/')[1]);
+              return names;
+            }, [])).join(', ') : "",
+            pickerIds: orderItem.pickers ? (orderItem.pickers.reduce((ids: any, picker: string) => {
+              ids.push(picker.split('/')[0]);
+              return ids;
+            }, [])) : "",
+            picklistId: orderItem.picklistId
           }
         })
 
@@ -528,7 +759,7 @@ const actions: ActionTree<OrderState , RootState> ={
 
         if(order.part.shipmentMethodEnum.shipmentMethodEnumId === 'STOREPICKUP'){
           order = { ...order, handovered: true }
-        }else {
+        } else {
           order = { ...order, shipped: true }
         }
 
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 127f07e11..0f3323356 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -151,6 +151,7 @@ const actions: ActionTree<UserState, RootState> = {
     dispatch('clearNotificationState')
     dispatch('clearPartialOrderRejectionConfig');
     this.dispatch('util/updateRejectReasons', [])
+    this.dispatch('util/updateCancelReasons', [])
     this.dispatch('order/clearOrders')
     commit(types.USER_END_SESSION)
     resetPermissions();
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
index fa86a09d2..b251751c6 100644
--- a/src/store/modules/util/UtilState.ts
+++ b/src/store/modules/util/UtilState.ts
@@ -4,4 +4,5 @@ export default interface UtilState {
   statusDesc: any;
   facilityTypeDesc: any;
   partyNames: any;
+  cancelReasons: Array<any>;
 }
\ No newline at end of file
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index 200bdd2e7..fb1336216 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -6,6 +6,7 @@ import { UtilService } from '@/services/UtilService'
 import { hasError } from '@/adapter'
 import logger from '@/logger'
 import store from '@/store'
+import { OrderService } from '@/services/OrderService'
 
 const actions: ActionTree<UtilState, RootState> = {
   async fetchRejectReasons({ commit }) {
@@ -86,10 +87,42 @@ const actions: ActionTree<UtilState, RootState> = {
     commit(types.UTIL_REJECT_REASONS_UPDATED, rejectReasons)
   },
 
+  async fetchCancelReasons({ commit }) {
+    let cancelReasons = [];
+    const payload = {
+      "inputFields": {
+        "enumTypeId": "ODR_ITM_CH_REASON"
+      },
+      "fieldList": ["enumId", "description"],
+      "entityName": "Enumeration",
+      "distinct": "Y",
+      "viewSize": 100,
+      "orderBy": "sequenceNum"
+    }
+
+    try {
+      const resp = await OrderService.performFind(payload)
+
+      if(!hasError(resp) && resp.data.count > 0) {
+        cancelReasons = resp.data.docs
+      } else {
+        throw resp.data
+      }
+    } catch (err) {
+      logger.error('Failed to fetch cancel reasons', err)
+    }
+
+    commit(types.UTIL_CANCEL_REASONS_UPDATED, cancelReasons)
+  },
+
   async updateRejectReasons({ commit }, payload) {
     commit(types.UTIL_REJECT_REASONS_UPDATED, payload)
   },
 
+  async updateCancelReasons({ commit }, payload) {
+    commit(types.UTIL_CANCEL_REASONS_UPDATED, payload)
+  },
+
   async fetchPaymentMethodTypeDesc({ commit, state }, paymentMethodTypeIds) {
     let paymentMethodTypeDesc = JSON.parse(JSON.stringify(state.paymentMethodTypeDesc))
     const cachedPaymentMethodTypeIds = Object.keys(paymentMethodTypeDesc);
diff --git a/src/store/modules/util/getters.ts b/src/store/modules/util/getters.ts
index cdd2e3064..717c702aa 100644
--- a/src/store/modules/util/getters.ts
+++ b/src/store/modules/util/getters.ts
@@ -18,5 +18,8 @@ const getters: GetterTree <UtilState, RootState> = {
   getPartyName: (state) => (partyId: string) => {
     return state.partyNames[partyId] ? state.partyNames[partyId] : ''
   },
+  getCancelReasons(state) {
+    return state.cancelReasons ? state.cancelReasons : []
+  },
 }
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/util/index.ts b/src/store/modules/util/index.ts
index 7228f9efc..d7b43fe4e 100644
--- a/src/store/modules/util/index.ts
+++ b/src/store/modules/util/index.ts
@@ -13,6 +13,7 @@ const utilModule: Module<UtilState, RootState> = {
     statusDesc: {},
     facilityTypeDesc: {},
     partyNames: {},
+    cancelReasons: []
   },
   getters,
   actions,
diff --git a/src/store/modules/util/mutation-types.ts b/src/store/modules/util/mutation-types.ts
index 10114d9eb..f455f9bd7 100644
--- a/src/store/modules/util/mutation-types.ts
+++ b/src/store/modules/util/mutation-types.ts
@@ -3,4 +3,5 @@ export const UTIL_REJECT_REASONS_UPDATED = SN_UTIL + '/REJECT_REASONS_UPDATED'
 export const UTIL_STATUS_UPDATED = SN_UTIL + '/STATUS_UPDATED'
 export const UTIL_PAYMENT_METHODS_UPDATED = SN_UTIL + '/PAYMENT_METHODS_UPDATED'
 export const UTIL_FACILITY_TYPE_UPDATED = SN_UTIL + '/FACILITY_TYPE_UPDATED'
-export const UTIL_PARTY_NAMES_UPDATED = SN_UTIL + '/PARTY_NAMES_UPDATED'
\ No newline at end of file
+export const UTIL_PARTY_NAMES_UPDATED = SN_UTIL + '/PARTY_NAMES_UPDATED'
+export const UTIL_CANCEL_REASONS_UPDATED = SN_UTIL + '/CANCEL_REASONS_UPDATED'
diff --git a/src/store/modules/util/mutations.ts b/src/store/modules/util/mutations.ts
index d2c275e1c..262b67cc1 100644
--- a/src/store/modules/util/mutations.ts
+++ b/src/store/modules/util/mutations.ts
@@ -18,5 +18,8 @@ const mutations: MutationTree <UtilState> = {
   [types.UTIL_PARTY_NAMES_UPDATED](state, payload) {
     state.partyNames = payload
   },
+  [types.UTIL_CANCEL_REASONS_UPDATED] (state, payload) {
+    state.cancelReasons = payload
+  },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2ec41f243..4d0fcc87b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -78,4 +78,35 @@ const getCurrentFacilityId = () => {
   return currentFacility?.facilityId
 }
 
-export { copyToClipboard, showToast, handleDateTimeInput, getFeature, formatPhoneNumber, getCurrentFacilityId }
+const getColorByDesc = (desc: string) => ({
+  "Approved": "primary",
+  "Authorized": "medium",
+  "Cancelled": "danger",
+  "Completed": "success",
+  "Created": "medium",
+  "Declined": "danger",
+  "Held": "warning",
+  "Not-Authorized": "warning",
+  "Not-Received": "warning",
+  "Pending": "warning",
+  "Picked up": "success",
+  "Picking": "dark",
+  "Ready for pickup": "primary",
+  "Received": "success",
+  "Refunded": "success",
+  "Reserved": "medium",
+  "Settled": "success",
+  "default": "medium"
+} as any)[desc]
+
+const currentSymbol: any = {
+  "USD": "$",
+  "EUR": "€",
+  "JPY": "¥"
+}
+
+const formatCurrency = (amount: any, code: string) => {
+  return `${currentSymbol[code] || code} ${amount || 0}`
+}
+
+export { copyToClipboard, showToast, handleDateTimeInput, getFeature, formatPhoneNumber, getCurrentFacilityId, getColorByDesc, formatCurrency }
diff --git a/src/utils/order.ts b/src/utils/order.ts
index ceec35c45..6b43cfa1a 100644
--- a/src/utils/order.ts
+++ b/src/utils/order.ts
@@ -124,9 +124,21 @@ const removeKitComponents = (parts: any) => {
   return updatedParts;
 };
 
+const getOrderStatus = (order: any, part: any, orderRouteSegment: any) => {
+  if(order.statusId === "ORDER_COMPLETED") {
+    return part.shipmentMethodEnum.shipmentMethodEnumId === "STOREPICKUP" ? "Picked up" : "Completed"
+  }
+
+  if(orderRouteSegment?.length) {
+    return orderRouteSegment[0]?.shipmentStatusId === "SHIPMENT_PACKED" ? "Ready for pickup" : orderRouteSegment[0]?.shipmentStatusId === "SHIPMENT_APPROVED" && order.pickers ? "Picking" : "Reserved"
+  }
+
+  return "Reserved"
+}
 
 export {
   getOrderCategory,
+  getOrderStatus,
   isKit,
   removeKitComponents
 }
\ No newline at end of file
diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index c356925d0..04cc0e5c5 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -133,7 +133,8 @@ export default defineComponent({
     },
     readyForPickup () {
       if (this.selectedPicker) {
-        modalController.dismiss({ dismissed: true, selectedPicker: this.selectedPicker });
+        const picker = this.availablePickers.find((picker) => picker.id == this.selectedPicker);
+        modalController.dismiss({ dismissed: true, selectedPicker: this.selectedPicker, picker });
       } else {
         showToast(translate('Select a picker'))
       }
diff --git a/src/views/OrderDetailUpdated.vue b/src/views/OrderDetailUpdated.vue
new file mode 100644
index 000000000..4bc818704
--- /dev/null
+++ b/src/views/OrderDetailUpdated.vue
@@ -0,0 +1,1329 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button default-href="/" slot="start" />
+        <ion-title>{{ translate("Order details") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button :disabled="!order?.orderId" @click="openOrderItemRejHistoryModal()">
+            <ion-icon slot="icon-only" :icon="timeOutline" />
+          </ion-button>
+          <ion-button v-if="orderType === 'open'" :disabled="!order?.orderId || !hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped || !order.part?.items?.length"  @click="printPicklist(order, order.part)">
+            <ion-icon slot="icon-only" :icon="printOutline" />
+          </ion-button>
+          <ion-button v-else-if="orderType === 'packed' && getBopisProductStoreSettings('PRINT_PACKING_SLIPS')" :class="order.part?.shipmentMethodEnum?.shipmentMethodEnumId !== 'STOREPICKUP' ? 'ion-hide-md-up' : ''" :disabled="!order?.orderId || !hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped || !order.part?.items?.length" @click="order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? printPackingSlip(order) : printShippingLabelAndPackingSlip(order)">
+            <ion-icon slot="icon-only" :icon="printOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <!-- Empty state -->
+      <div class="empty-state" v-if="!order?.orderId">
+        <p>{{ translate("Order not found")}}</p>
+      </div>
+      <main v-else>
+        <aside>
+          <!-- Timeline -->
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="timeOutline" class="mobile-only" />
+            <h2>{{ translate("Timeline") }}</h2>
+            <ion-badge slot="end" :color="getColorByDesc(orderStatus)">{{ translate(orderStatus) }}</ion-badge>
+          </ion-item>
+
+          <ion-list class="desktop-only">
+            <ion-item v-for="event in orderTimeline" :key="event.id">
+              <ion-icon :icon="event.icon" slot="start" />
+              <ion-label>
+                <p v-if="event.timeDiff">{{ event.timeDiff }}</p>
+                {{ translate(event.label) }}
+                <p v-if="event.metaData">{{ event.metaData }}</p>
+              </ion-label>
+              <ion-note slot="end" v-if="event.value && event.valueType === 'date-time-millis'">{{ formatDateTime(event.value) }}</ion-note>
+            </ion-item>
+          </ion-list>
+        </aside>
+        <section>
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="ticketOutline" />
+            <ion-label>
+              <h1>{{ order.orderName }}</h1>
+              <p>{{ order.orderId }}</p>
+            </ion-label>
+          </ion-item>
+
+           <!-- Order Status -->
+          <ion-item v-if="order.readyToHandover || order.readyToShip" color="light" lines="none">
+            <ion-icon :icon="checkmarkCircleOutline" color="success" slot="start" />
+            <ion-label class="ion-text-wrap">{{ order.readyToHandover ? translate("Order is now ready to handover.") : translate("Order is now ready to be shipped.") }}</ion-label>
+          </ion-item>
+          <ion-item v-if="order.handovered || order.shipped" color="light" lines="none">
+            <ion-icon :icon="checkmarkCircleOutline" color="success" slot="start" />
+            <ion-label class="ion-text-wrap">{{ order.handovered ? translate("Order is successfully handed over to customer.") : translate("Order is successfully shipped.") }}</ion-label>
+          </ion-item>
+
+          <ion-card v-for="(item, index) in order.part?.items" :key="index">
+            <div class="order-item">
+              <ion-item class="product-info" lines="none">
+                <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>
+                  <ion-badge color="dark" v-if="isKit(item)">{{ translate("Kit") }}</ion-badge>
+                </ion-label>
+              </ion-item>
+              <div class="product-metadata">
+                <template v-if="orderType === 'open' && !(order.readyToHandover || order.readyToShip)">
+                  <!-- Rejection Reason -->
+                  <ion-chip v-if="item.rejectReason" outline color="danger" @click.stop="openRejectReasonPopover($event, item, order)">
+                    <ion-icon :icon="closeCircleOutline" @click.stop="removeRejectionReason($event, item, order)"/>
+                    <ion-label>{{ getRejectionReasonDescription(item.rejectReason) }}</ion-label>
+                    <ion-icon :icon="caretDownOutline"/>
+                  </ion-chip>
+                  <ion-chip v-else-if="isEntierOrderRejectionEnabled(order)" outline color="danger" @click.stop="openRejectReasonPopover($event, item, order)">
+                    <ion-label>{{ getRejectionReasonDescription(rejectEntireOrderReasonId) ? getRejectionReasonDescription(rejectEntireOrderReasonId) : translate('Reject entire order')}}</ion-label>
+                    <ion-icon :icon="caretDownOutline"/>
+                  </ion-chip>
+                  <ion-button v-else slot="end" color="danger" fill="clear" size="small" @click.stop="openRejectReasonPopover($event, item, order)">
+                    <ion-icon slot="icon-only" :icon="trashOutline"/>
+                  </ion-button>
+                </template>
+                <!-- Order item calcelation flow -->
+                <template v-else-if="orderType === 'packed' && !(order.handovered || order.shipped)">
+                  <ion-chip v-if="item.cancelReason" outline color="danger" @click.stop="openCancelReasonPopover($event, item, order)">
+                    <ion-icon :icon="closeCircleOutline" @click.stop="removeCancellationReason($event, item, order)"/>
+                    <ion-label>{{ getCancelReasonDescription(item.cancelReason) }}</ion-label>
+                    <ion-icon :icon="caretDownOutline"/>
+                  </ion-chip>
+                  <ion-button v-else slot="end" color="danger" fill="clear" size="small" @click.stop="openCancelReasonPopover($event, item, order)">
+                    {{ translate("Cancel") }}
+                  </ion-button>
+                </template>
+
+                <div class="show-kit-components" slot="end">
+                  <ion-spinner v-if="item.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, item)">
+                      <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
+                    </ion-button>
+                  </div>
+                  <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId, order.shipGroupSeqId)">
+                    <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
+                  </ion-button>
+
+                  <ion-button v-if="isKit(item)" fill="clear" size="small" @click.stop="fetchKitComponents(item, order)">
+                    <ion-icon v-if="item.showKitComponents" color="medium" slot="icon-only" :icon="chevronUpOutline"/>
+                    <ion-icon v-else color="medium" slot="icon-only" :icon="listOutline"/>
+                  </ion-button>
+                </div>
+              </div>
+            </div>
+
+            <template v-if="isKit(item) && item.showKitComponents && !getProduct(item.productId)?.productComponents">
+              <ion-item lines="none">
+                <ion-skeleton-text animated style="height: 80%;"/>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-skeleton-text animated style="height: 80%;"/>
+              </ion-item>
+            </template>
+            <template v-else-if="isKit(item) && item.showKitComponents && getProduct(item.productId)?.productComponents">
+              <ion-card v-for="(productComponent, index) in getProduct(item.productId).productComponents" :key="index">
+                <ion-item lines="none">
+                  <ion-thumbnail slot="start">
+                    <DxpShopifyImg :src="getProduct(productComponent.productIdTo).mainImageUrl" size="small"/>
+                  </ion-thumbnail>
+                  <ion-label>
+                    <p class="overline">{{ getProductIdentificationValue(productIdentificationPref.secondaryId, getProduct(productComponent.productIdTo)) }}</p>
+                    {{ getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(productComponent.productIdTo)) ? getProductIdentificationValue(productIdentificationPref.primaryId, getProduct(productComponent.productIdTo)) : productComponent.productIdTo }}
+                  </ion-label>
+                  <ion-checkbox slot="end" aria-label="Rejection Reason kit component" v-if="item.rejectReason || isEntierOrderRejectionEnabled(order)" :checked="item.rejectedComponents?.includes(productComponent.productIdTo)" @ionChange="rejectKitComponent(order, item, productComponent.productIdTo)" />
+                </ion-item>
+              </ion-card>
+            </template>
+          </ion-card>
+          <p v-if="!order.part?.items?.length && orderType === 'open'" class="empty-state">{{ translate("All order items are rejected") }}</p>
+          <p v-if="!order.part?.items?.length && orderType === 'packed'" class="empty-state">{{ translate("All order items are cancelled") }}</p>
+
+          <template v-if="orderType === 'packed'">
+            <ion-item lines="none" v-if="isCancelationSyncJobEnabled && isProcessRefundEnabled">
+              <ion-icon slot="start" :icon="checkmarkDoneOutline"/>
+              <ion-label>
+                {{ translate("Cancelation and refund sync to Shopify is enabled.") }}
+              </ion-label>
+            </ion-item>
+            <ion-item lines="none" v-else-if="isCancelationSyncJobEnabled">
+              <ion-icon slot="start" :icon="warningOutline"/>
+              <ion-label>
+                {{ translate("Cancelation sync to Shopify is enabled. Refund processing is disabled.") }}
+              </ion-label>
+            </ion-item>
+            <ion-item lines="none" v-else>
+              <ion-icon slot="start" :icon="closeOutline"/>
+              <ion-label>
+                {{ translate("Cancelation and refund sync to Shopify is not enabled.") }}
+              </ion-label>
+            </ion-item>
+          </template>
+
+          <ion-item lines="none" v-if="orderType === 'open' && order.part?.items?.length">
+            <ion-button size="default" :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected || hasRejectedItems" @click="readyForPickup(order, order.part)">
+              <ion-icon slot="start" :icon="bagCheckOutline"/>
+              {{ order?.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? translate("Ready for pickup") : translate("Ready to ship") }}
+            </ion-button>
+            <ion-button size="default" :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected || !hasRejectedItems" color="danger" fill="outline" @click="rejectOrder()">
+              {{ translate("Reject Items") }}
+            </ion-button>
+          </ion-item>
+          <ion-item lines="none" v-else-if="orderType === 'packed' && order.part?.items?.length" class="ion-hide-md-down">
+            <ion-button size="default" :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped || order.cancelled || hasCancelledItems" expand="block" @click="deliverShipment(order)">
+              <ion-icon slot="start" :icon="checkmarkDoneOutline"/>
+              {{ order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? translate("Handover") : translate("Ship") }}
+            </ion-button>
+            <ion-button color="danger" size="default" :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped || order.cancelled || !hasCancelledItems" expand="block" fill="outline" @click="cancelOrder(order)">
+              {{ translate("Cancel items") }}
+            </ion-button>
+          </ion-item>
+
+          <div class="info">
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>{{ order?.customer?.name || order?.customer?.partyId }}</ion-card-title>
+              </ion-card-header>
+              <ion-list>
+                <ion-item>
+                  <ion-icon :icon="mailOutline" slot="start" />
+                  <ion-label class="ion-text-wrap">{{ order.billingEmail || "-" }}</ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-icon :icon="callOutline" slot="start" />
+                  <ion-label>{{ order.billingPhone || "-" }}</ion-label>
+                </ion-item>
+                <ion-item lines="none">
+                  <ion-icon :icon="cashOutline" slot="start" />
+                  <ion-label v-if="order.billingAddress" class="ion-text-wrap">
+                    {{ order.billingAddress.toName }}
+                    <p>{{ order.billingAddress.address1 }}</p>
+                    <p>{{ order.billingAddress.address2 }}</p>
+                    <p>{{ order.billingAddress.city }} {{ order.billingAddress.city && order.billingAddress.postalCode && ',' }} {{ order.billingAddress.postalCode }}</p>
+                    <p>{{ order.billingAddress.stateName }} {{ order.billingAddress.stateName && order.billingAddress.countryName && ',' }} {{ order.billingAddress.countryName }}</p>
+                  </ion-label>
+                  <ion-label v-else>{{ "-" }}</ion-label>
+                </ion-item>
+              </ion-list>
+            </ion-card>
+
+            <ion-card>
+              <ion-card-header>
+                <ion-card-title>{{ translate("Payment") }}</ion-card-title>
+              </ion-card-header>
+              <div v-if="order.orderPayments?.length">
+                <ion-list v-for="(orderPayment, index) in order.orderPayments" :key="index">
+                  <ion-item lines="none">
+                    <ion-label class="ion-text-wrap">
+                      <p class="overline">{{ orderPayment.methodTypeId }}</p>
+                      <ion-label>{{ translate(getPaymentMethodDesc(orderPayment.methodTypeId)) || orderPayment.methodTypeId }}</ion-label>
+                      <ion-note :color="getColorByDesc(getStatusDesc(orderPayment.paymentStatus))">{{ translate(getStatusDesc(orderPayment.paymentStatus)) }}</ion-note>
+                    </ion-label>
+                    <div slot="end" class="ion-text-end">
+                      <ion-badge v-if="order.orderPayments.length > 1 && index === 0" color="dark">{{ translate("Latest") }}</ion-badge>
+                      <ion-label slot="end">{{ formatCurrency(orderPayment.amount, order.currencyUom) }}</ion-label>
+                    </div>
+                  </ion-item>
+                </ion-list>
+              </div>
+              <p v-else class="empty-state">
+                {{ translate("No payments found") }}
+              </p>
+            </ion-card>
+          </div>
+
+          <ion-item lines="none" v-if="order.shipGroups?.filter((group: any) => group.shipGroupSeqId !== order.part.orderPartSeqId)?.length">
+            <ion-label>{{ translate("Other shipments in this order") }}</ion-label>
+          </ion-item>
+          <div class="ion-padding">
+            <template v-for="shipGroup in order.shipGroups" :key="shipGroup.shipmentId">
+              <ion-card v-if="shipGroup.shipGroupSeqId !== order.part.orderPartSeqId">
+                <ion-card-header>
+                  <div>
+                    <ion-card-subtitle class="overline">{{ getfacilityTypeDesc(shipGroup.facilityTypeId) }}</ion-card-subtitle>
+                    <ion-card-title>{{ shipGroup.facilityName }}</ion-card-title>
+                    {{ shipGroup.shipGroupSeqId }}
+                  </div>
+                  <ion-badge :color="shipGroup.category ? 'primary' : 'medium'">{{ shipGroup.category ? shipGroup.category : translate('Pending allocation') }}</ion-badge>
+                </ion-card-header>
+
+                <ion-item v-if="shipGroup.carrierPartyId">
+                  {{ getPartyName(shipGroup.carrierPartyId) }}
+                  <ion-label slot="end">{{ shipGroup.trackingCode }}</ion-label>
+                  <ion-icon slot="end" :icon="locateOutline" />
+                </ion-item>
+
+                <ion-item v-if="shipGroup.shippingInstructions" color="light" lines="none">
+                  <ion-label class="ion-text-wrap">
+                    <p class="overline">{{ translate("Handling Instructions") }}</p>
+                    <p>{{ shipGroup.shippingInstructions }}</p>
+                  </ion-label>
+                </ion-item>
+
+                <ion-item lines="none" v-for="item in shipGroup?.items" :key="item">
+                  <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>
+                  </ion-label>
+
+                  <div slot="end">
+                    <ion-spinner v-if="item.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, item)">
+                        <ion-icon slot="icon-only" :icon="informationCircleOutline" color="medium" />
+                      </ion-button>
+                    </div>
+                    <ion-button v-else fill="clear" @click.stop="fetchProductStock(item.productId, shipGroup.shipGroupSeqId)">
+                      <ion-icon color="medium" slot="icon-only" :icon="cubeOutline" />
+                    </ion-button>
+                  </div>
+                </ion-item>
+              </ion-card>
+            </template>
+          </div>
+        </section>
+      </main>
+
+      <ion-fab v-if="orderType === 'open' && order?.orderId" class="ion-hide-md-up" vertical="bottom" horizontal="end" slot="fixed" >
+        <ion-fab-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.readyToHandover || order.readyToShip || order.rejected" @click="readyForPickup(order, order.part)">
+          <ion-icon :icon="order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? bagHandleOutline : giftOutline" />
+        </ion-fab-button>
+      </ion-fab>
+      <ion-fab v-else-if="orderType === 'packed' && order?.orderId" class="ion-hide-md-up" vertical="bottom" horizontal="end" slot="fixed" >
+        <ion-fab-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order.handovered || order.shipped || order.cancelled" @click="deliverShipment(order)">
+          <ion-icon :icon="checkmarkDoneOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  alertController,
+  IonBackButton,
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCheckbox,
+  IonChip,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonList,
+  IonPage,
+  IonLabel,
+  IonNote,
+  IonSkeletonText,
+  IonSpinner,
+  IonThumbnail,
+  IonTitle,
+  IonToolbar,
+  IonFab,
+  IonFabButton,
+  modalController,
+  popoverController
+} from "@ionic/vue";
+import { computed, defineComponent } from "vue";
+import { mapGetters, useStore } from "vuex";
+import {
+  callOutline,
+  cashOutline,
+  copyOutline,
+  closeOutline,
+  closeCircleOutline,
+  checkmarkCircleOutline,
+  checkmarkDoneOutline,
+  cubeOutline,
+  giftOutline,
+  informationCircleOutline,
+  locateOutline,
+  mailOutline,
+  printOutline,
+  pulseOutline,
+  sendOutline,
+  bagHandleOutline,
+  bagRemoveOutline,
+  timeOutline,
+  ticketOutline,
+  bagCheckOutline,
+  sunnyOutline,
+  downloadOutline,
+  trashOutline,
+  chevronUpOutline,
+  listOutline,
+  caretDownOutline,
+  warningOutline,
+  personAddOutline,
+  medkitOutline
+} from "ionicons/icons";
+import { useRouter } from 'vue-router'
+import { Actions, hasPermission } from '@/authorization'
+import OrderItemRejHistoryModal from '@/components/OrderItemRejHistoryModal.vue';
+import AssignPickerModal from "@/views/AssignPickerModal.vue";
+import { copyToClipboard, formatCurrency, getColorByDesc, getFeature, showToast } from '@/utils'
+import { DateTime } from "luxon";
+import { api, hasError } from '@/adapter';
+import { OrderService } from "@/services/OrderService";
+import { getProductIdentificationValue, translate, useProductIdentificationStore, useUserStore } from "@hotwax/dxp-components";
+import emitter from '@/event-bus'
+import logger from "@/logger";
+import InventoryDetailsPopover from '@/components/InventoryDetailsPopover.vue'
+import { isKit, getOrderStatus } from '@/utils/order'
+import ReportAnIssuePopover from "@/components/ReportAnIssuePopover.vue";
+import { UserService } from "@/services/UserService";
+import ConfirmCancelModal from "@/components/ConfirmCancelModal.vue";
+import { UtilService } from "@/services/UtilService";
+
+export default defineComponent({
+  name: "OrderDetail",
+  components: {
+    IonBackButton,
+    IonBadge,
+    IonButton,
+    IonButtons,
+    IonCard,
+    IonCardHeader,
+    IonCardSubtitle,
+    IonCardTitle,
+    IonCheckbox,
+    IonChip,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonList,
+    IonPage,
+    IonLabel,
+    IonNote,
+    IonSkeletonText,
+    IonSpinner,
+    IonThumbnail,
+    IonTitle,
+    IonToolbar,
+    IonFab,
+    IonFabButton,
+  },
+  data() {
+    return {
+      rejectEntireOrderReasonId: "REJ_AVOID_ORD_SPLIT",
+      isCancelationSyncJobEnabled: false,
+      isProcessRefundEnabled: false,
+      cancelJobNextRunTime: "",
+      orderTimeline: [] as any,
+      hasCancelledItems: false,
+      hasRejectedItems: false,
+      pickers: [] as any,
+      picklistDate: 0,
+      orderStatus: ""
+    }
+  },
+  computed: {
+    ...mapGetters({
+      order: "order/getCurrent",
+      partialOrderRejectionConfig: 'user/getPartialOrderRejectionConfig',
+      getPaymentMethodDesc: 'util/getPaymentMethodDesc',
+      getStatusDesc: 'util/getStatusDesc',
+      getProduct: 'product/getProduct',
+      getProductStock: 'stock/getProductStock',
+      getfacilityTypeDesc: 'util/getFacilityTypeDesc',
+      getPartyName: 'util/getPartyName',
+      getBopisProductStoreSettings: 'user/getBopisProductStoreSettings',
+      rejectReasons: 'util/getRejectReasons',
+      cancelReasons: 'util/getCancelReasons',
+      currentEComStore: 'user/getCurrentEComStore',
+    })
+  },
+  props: ['orderType', 'orderId', 'orderPartSeqId'],
+  methods: {
+    async fetchProductStock(productId: string, shipGroupSeqId: any) {
+      this.store.dispatch('order/updateOrderItemFetchingStatus', { productId, shipGroupSeqId })
+      await this.store.dispatch('stock/fetchStock', { productId })
+      this.store.dispatch('order/updateOrderItemFetchingStatus', { productId, shipGroupSeqId })
+    },
+    async assignPicker(order: any, part: any, facilityId: any) {
+      const assignPickerModal = await modalController.create({
+        component: AssignPickerModal,
+        componentProps: { order, part, facilityId }
+      });
+
+      assignPickerModal.onDidDismiss().then(async(result: any) => {
+        if(result.data.selectedPicker) {
+          this.pickers = result.data.picker
+          this.picklistDate = DateTime.now().toMillis()
+          await this.store.dispatch('order/packShipGroupItems', { order, part, facilityId, selectedPicker: result.data.selectedPicker })
+          this.prepareOrderTimeline();
+        }
+      })
+
+      return assignPickerModal.present();
+    },
+    async deliverShipment(order: any) {
+      const pickup = order.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
+      const header = pickup ? translate("Handover") : translate("Ship");
+      const message = pickup ? translate("Verify that the items in the package are valid and the customer has received their order. Once the order is handed over to the customer it cannot be undone.", { space: '<br/><br/>' }) : '';
+
+      const alert = await alertController
+        .create({
+          header,
+          message,
+          buttons: [{
+            text: translate('Cancel'),
+            role: 'cancel'
+          }, {
+            text: translate(header),
+            handler: async () => {
+              await this.store.dispatch('order/deliverShipment', order).then((resp: any) => {
+                if(!hasError(resp)) {
+                  // Update order timeline once the order is completed
+                  // Sending statusId explicitly as we do not fetch the order info again on handover
+                  this.prepareOrderTimeline({ statusId: "ORDER_COMPLETED" });
+                }
+              })
+            }
+          }]
+        });
+      return alert.present();
+    },
+    async openOrderItemRejHistoryModal() {
+      const orderItemRejHistoryModal = await modalController.create({
+        component: OrderItemRejHistoryModal,
+      });
+      return orderItemRejHistoryModal.present();
+    },
+    async getOrderDetail(orderId: any, orderPartSeqId: any, orderType: any) {
+      const payload = {
+        facilityId: this.currentFacility?.facilityId,
+        orderId,
+        orderPartSeqId
+      }
+      await this.store.dispatch("order/getOrderDetail", { payload, orderType })
+      await this.store.dispatch("order/fetchPaymentDetail")
+      await this.store.dispatch("order/getShippingPhoneNumber")
+    },
+    async rejectOrder() {
+      emitter.emit("presentLoader");
+
+      const payload = {
+        "orderId": this.order.orderId
+      }
+
+      let order = JSON.parse(JSON.stringify(this.order))
+
+      // https://blog.devgenius.io/using-async-await-in-a-foreach-loop-you-cant-c174b31999bd
+      // The forEach, map, reduce loops are not built to work with asynchronous callback functions.
+      // It doesn't wait for the promise of an iteration to be resolved before it goes on to the next iteration.
+      // We could use either the for…of the loop or the for(let i = 0;….)
+      for (const item of order.part.items) {
+        let params = {} as any;
+        if(this.isEntierOrderRejectionEnabled(order)) {
+          params = {
+            ...payload,
+            rejectReason: item.rejectReason || this.rejectEntireOrderReasonId,
+            facilityId: item.facilityId,
+            orderItemSeqId: item.orderItemSeqId,
+            shipmentMethodTypeId: order.part.shipmentMethodEnum.shipmentMethodEnumId,
+            quantity: parseInt(item.quantity),
+            ...(order.part.shipmentMethodEnum.shipmentMethodEnumId === "STOREPICKUP" && ({"naFacilityId": "PICKUP_REJECTED"})),
+          }
+        } else if(item.rejectReason) {
+          params = {
+            ...payload,
+            rejectReason: item.rejectReason || this.rejectEntireOrderReasonId,
+            facilityId: item.facilityId,
+            orderItemSeqId: item.orderItemSeqId,
+            shipmentMethodTypeId: order.part.shipmentMethodEnum.shipmentMethodEnumId,
+            quantity: parseInt(item.quantity),
+            ...(order.part.shipmentMethodEnum.shipmentMethodEnumId === "STOREPICKUP" && ({"naFacilityId": "PICKUP_REJECTED"})),
+          }
+        }
+
+        if(Object.keys(params).length) {
+          // If the item is a kit, then pass the rejectedComponents with the item on rejection
+          if(isKit(item)) {
+            params["rejectedComponents"] = item.rejectedComponents
+          }
+          try {
+            const resp = await OrderService.rejectOrderItem({ payload: params });
+  
+            if(!hasError(resp)) {
+              order["part"] = {
+                ...order.part,
+                items: order.part.items.filter((orderItem: any) => !(orderItem.orderItemSeqId === item.orderItemSeqId && orderItem.productId === item.productId))
+              }
+            }
+          } catch(err) {
+            logger.error(`Something went wrong while rejecting order item ${item.productId}/${item.orderItemSeqId}`)
+          }
+        }
+      }
+
+      // If all the items are rejected then marking the whole order as rejected
+      if(!order.part.items.length) order.rejected = true;
+
+      await this.store.dispatch("order/updateCurrent", { order });
+      this.hasRejectedItems = this.order.part.items.some((item: any) => item.rejectReason);
+
+      // We are only preparing the complete timeline for the store pickup order
+      if(this.order.part?.shipmentMethodEnum?.shipmentMethodEnumId === "STOREPICKUP") {
+        this.prepareOrderTimeline();
+      }
+
+      emitter.emit("dismissLoader");
+    },
+    async cancelOrder(order: any) {
+      const cancelOrderConfirmModal = await modalController.create({
+        component: ConfirmCancelModal,
+        componentProps: {
+          order,
+          isCancelationSyncJobEnabled: this.isCancelationSyncJobEnabled,
+          isProcessRefundEnabled: this.isProcessRefundEnabled,
+          cancelJobNextRunTime: this.cancelJobNextRunTime,
+          orderType: this.orderType
+        }
+      });
+
+      cancelOrderConfirmModal.onDidDismiss().then(() => {
+        this.hasCancelledItems = this.order.part.items.some((item: any) => item.cancelReason);
+        // We are only preparing the complete timeline for the store pickup order
+        if(this.order.part?.shipmentMethodEnum?.shipmentMethodEnumId === "STOREPICKUP") {
+          this.prepareOrderTimeline();
+        }
+      })
+
+      return cancelOrderConfirmModal.present();
+    },
+    async readyForPickup(order: any, part: any) {
+      if(this.getBopisProductStoreSettings('ENABLE_TRACKING') && order.isPicked !== 'Y') return this.assignPicker(order, part, this.currentFacility?.facilityId);
+      const pickup = part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
+      const header = pickup ? translate('Ready for pickup') : translate('Ready to ship');
+      const message = pickup ? translate('An email notification will be sent to that their order is ready for pickup. This order will also be moved to the packed orders tab.', { customerName: order.customer.name, space: '<br/><br/>' }) : '';
+
+      const alert = await alertController
+        .create({
+          header: header,
+          message: message,
+          buttons: [{
+            text: translate('Cancel'),
+            role: 'cancel'
+          }, {
+            text: header,
+            handler: async () => {
+              if(!pickup) {
+                await this.packShippingOrders(order, part);
+              } else {
+                await this.store.dispatch('order/packShipGroupItems', {order, part, facilityId: this.currentFacility?.facilityId})
+              }
+              // Update order timeline once the order is marked as ready for pickup
+              this.prepareOrderTimeline();
+            }
+          }]
+        });
+      return alert.present();
+    },
+    async packShippingOrders(currentOrder: any, part: any) {
+      try {
+        const resp = await OrderService.packOrder({
+          'picklistBinId': currentOrder.picklistBinId,
+          'orderId': currentOrder.orderId
+        })
+
+        if(!hasError(resp)) {
+          showToast(translate("Order packed and ready for delivery"));
+          this.store.dispatch("order/updateCurrent", { order: { ...currentOrder, readyToShip: true } }) 
+          this.store.dispatch("order/removeOpenOrder", { order: currentOrder, part })
+        } else {
+          throw resp.data;
+        }
+      } catch(error: any) {
+        logger.error(error);
+        showToast(translate("Something went wrong"))
+      }
+    },
+    async fetchRejectReasons() {
+      await this.store.dispatch('util/fetchRejectReasons');
+    },
+    async fetchCancelReasons() {
+      await this.store.dispatch('util/fetchCancelReasons');
+    },
+    async printPackingSlip(order: any) {
+      try {
+        // Get packing slip from the server
+        const response: any = await api({
+          method: 'get',
+          url: 'PackingSlip.pdf',
+          params: {
+            shipmentId: order.shipmentId
+          },
+          responseType: "blob"
+        })
+
+        if (!response || response.status !== 200 || hasError(response)) {
+          showToast(translate("Failed to load packing slip"))
+          return;
+        }
+
+        // Generate local file URL for the blob received
+        const pdfUrl = window.URL.createObjectURL(response.data);
+        // Open the file in new tab
+        try {
+          (window as any).open(pdfUrl, "_blank").focus();
+        }
+        catch {
+          showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'packing slip'}));
+        }
+
+      } catch(err) {
+        showToast(translate("Failed to load packing slip"))
+        logger.error(err)
+      }
+    },
+    async printShippingLabelAndPackingSlip(order: any) {
+      await OrderService.printShippingLabelAndPackingSlip(order.shipmentId)
+    },
+    async openInventoryDetailPopover(Event: any, item: any){
+      const popover = await popoverController.create({
+        component: InventoryDetailsPopover,
+        event: Event,
+        showBackdrop: false,
+        componentProps: { item }
+      });
+      await popover.present();
+    },
+    formatDateTime(date: any) {
+      return DateTime.fromMillis(date).toLocaleString({ hour: "numeric", minute: "2-digit", day: "numeric", month: "short", year: "numeric", hourCycle: "h12" })
+    },
+    findTimeDiff(startTime: any, endTime: any) {
+      if(!endTime || !startTime) {
+        return ""
+      }
+
+      const timeDiff = DateTime.fromMillis(endTime).diff(DateTime.fromMillis(startTime), ["years", "months", "days", "hours", "minutes"]);
+      let diffString = "+ ";
+      if(timeDiff.years) diffString += `${Math.round(timeDiff.years)} years `
+      if(timeDiff.months) diffString += `${Math.round(timeDiff.months)} months `
+      if(timeDiff.days) diffString += `${Math.round(timeDiff.days)} days `
+      if(timeDiff.hours) diffString += `${Math.round(timeDiff.hours)} hours `
+      if(timeDiff.minutes) diffString += `${Math.round(timeDiff.minutes)} minutes`
+      return diffString
+    },
+    async fetchKitComponents(orderItem: any, order: any, toggleKitComponents = true) {
+      await this.store.dispatch('product/fetchProductComponents', { productId: orderItem.productId })
+
+      if(toggleKitComponents) {
+        orderItem.showKitComponents = !orderItem.showKitComponents
+        this.store.dispatch("order/updateCurrentOrderInfo", order)
+      }
+    },
+    async openRejectReasonPopover(ev: Event, item: any, order: any) {
+      const reportIssuePopover = await popoverController.create({
+        component: ReportAnIssuePopover,
+        event: ev,
+        translucent: true,
+        showBackdrop: false,
+      });
+
+      reportIssuePopover.present();
+
+      const result = await reportIssuePopover.onDidDismiss();
+
+      if (result.data) {
+        this.updateRejectReason(result.data, item, order)
+      }
+    },
+    async openCancelReasonPopover(ev: Event, item: any, order: any) {
+      const cancelItemPopover = await popoverController.create({
+        component: ReportAnIssuePopover,
+        componentProps: {
+          reasonType: "cancel"
+        },
+        event: ev,
+        translucent: true,
+        showBackdrop: false,
+      });
+
+      cancelItemPopover.present();
+
+      const result = await cancelItemPopover.onDidDismiss();
+
+      if (result.data) {
+        this.updateCancelReason(result.data, item, order)
+      }
+    },
+    async updateCancelReason(updatedReason: string, item: any, order: any) {
+      item.cancelReason = updatedReason;
+      this.hasCancelledItems = true
+      this.store.dispatch("order/updateCurrent", { order })
+    },
+    async updateRejectReason(updatedReason: string, item: any, order: any) {
+      item.rejectReason = updatedReason;
+
+      // If the current item is kit, and if its components are not available then fetch the components for the kit and mark those components as rejected components
+      if(isKit(item)) {
+        if(!this.getProduct(item.productId).productComponents) await this.fetchKitComponents(item, order, false)
+        item.rejectedComponents = this.getProduct(item.productId).productComponents?.map((product: any) => product.productIdTo)
+      }
+
+      this.hasRejectedItems = true
+      this.store.dispatch("order/updateCurrent", { order })
+    },
+    getRejectionReasonDescription(rejectionReasonId: string) {
+      const reason = this.rejectReasons?.find((reason: any) => reason.enumId === rejectionReasonId)
+      return reason?.description ? reason.description : reason?.enumDescription ? reason.enumDescription : reason?.enumId;
+    },
+    getCancelReasonDescription(cancelReasonId: string) {
+      const reason = this.cancelReasons?.find((reason: any) => reason.enumId === cancelReasonId)
+      return reason?.description ? reason.description : reason?.enumDescription ? reason.enumDescription : reason?.enumId;
+    },
+    isEntierOrderRejectionEnabled(order: any) {
+      return (!this.partialOrderRejectionConfig || !this.partialOrderRejectionConfig.settingValue || !JSON.parse(this.partialOrderRejectionConfig.settingValue)) && this.hasRejectedItems
+    },
+    async removeRejectionReason(ev: Event, item: any, order: any) {
+      delete item["rejectedComponents"];
+      item.rejectReason = "";
+      this.hasRejectedItems = order.part.items.some((item: any) => item.rejectReason);
+      this.store.dispatch("order/updateCurrent", { order })
+    },
+    async removeCancellationReason(ev: Event, item: any, order: any) {
+      item.cancelReason = "";
+      this.hasCancelledItems = order.part.items.some((item: any) => item.cancelReason);
+      this.store.dispatch("order/updateCurrent", { order })
+    },
+    rejectKitComponent(order: any, item: any, componentProductId: string) {
+      let rejectedComponents = item.rejectedComponents ? item.rejectedComponents : []
+      if (rejectedComponents.includes(componentProductId)) {
+        rejectedComponents = rejectedComponents.filter((rejectedComponent: any) => rejectedComponent !== componentProductId)
+      } else {
+        rejectedComponents.push(componentProductId);
+      }
+      item.rejectedComponents = rejectedComponents;
+      order.part.items.map((orderItem: any) => {
+        if (orderItem.orderItemSeqId === item.orderItemSeqId) {
+          orderItem.rejectedComponents = rejectedComponents;
+        }
+      })
+      this.store.dispatch("order/updateCurrent", { order })
+    },
+    async printPicklist(order: any, part: any) {
+      if(order.isPicked === 'Y') {
+        await OrderService.printPicklist(order.picklistId)
+        return;
+      }
+
+      if(!this.getBopisProductStoreSettings('ENABLE_TRACKING')) {
+        try {
+          const resp = await UserService.ensurePartyRole({
+            partyId: "_NA_",
+            roleTypeId: "WAREHOUSE_PICKER",
+          })
+
+          if(hasError(resp)) {
+            throw resp.data;
+          }
+        } catch (error) {
+          showToast(translate("Something went wrong. Picklist can not be created."));
+          logger.error(error)
+          return;
+        }
+        await this.createPicklist(order, "_NA_", "Default");
+        this.pickers = ["Default"]
+        this.picklistDate = DateTime.now().toMillis()
+        this.prepareOrderTimeline();
+        return;
+      }
+
+      const assignPickerModal = await modalController.create({
+        component: AssignPickerModal,
+        componentProps: { order, part, facilityId: this.currentFacility.facilityId }
+      });
+
+      assignPickerModal.onDidDismiss().then(async(result: any) => {
+        if(result.data?.selectedPicker) {
+          await this.createPicklist(order, result.data.selectedPicker, result.data.picker)
+          this.pickers = result.data.picker
+          this.picklistDate = DateTime.now().toMillis()
+          this.prepareOrderTimeline();
+        }
+      })
+
+      return assignPickerModal.present();
+    },
+    async createPicklist(order: any, selectedPicker: any, picker: any) {
+      let resp;
+
+      const items = order.part.items;
+      const formData = new FormData();
+      formData.append("facilityId", items[0].facilityId);
+      items.map((item: any, index: number) => {
+        formData.append("itemStatusId_o_"+index, "PICKITEM_PENDING")
+        formData.append("pickerIds_o_"+index, selectedPicker)
+        formData.append("picked_o_"+index, item.quantity)
+        Object.keys(item).map((property) => {
+          if(property !== "facilityId") formData.append(property+'_o_'+index, item[property])
+        })
+      });
+
+      try {
+        resp = await OrderService.createPicklist(formData);
+        if(!hasError(resp)) {
+          // generating picklist after creating a new picklist
+          await OrderService.printPicklist(resp.data.picklistId)
+          order["isPicked"] = "Y"
+          order["pickers"] = picker.name
+          order["picklistId"] = resp.data.picklistId
+          order["picklistBinId"] = resp.data.picklistBinId
+          this.store.dispatch('order/updateCurrent', { order })
+        } else {
+          throw resp.data;
+        }
+      } catch (err) {
+        showToast(translate('Something went wrong. Picklist can not be created.'));
+        emitter.emit("dismissLoader");
+        return;
+      }
+    },
+    async fetchJobs() {
+      // TODO: Add check to only fetch the jobs for current product store
+      let params = {
+        inputFields: {
+          statusId: ["SERVICE_DRAFT", "SERVICE_PENDING"],
+          statusId_op: "in",
+          systemJobEnumId: "JOB_UL_CNCLD_ORD",
+          systemJobEnumId_op: "equals",
+          productStoreId: this.currentEComStore?.productStoreId,
+        },
+        orderBy: "runTime DESC",
+        noConditionFind: "Y",
+        viewSize: 50
+      } as any
+
+      try {
+        const resp = await UtilService.fetchJobInformation(params)
+
+        if(!hasError(resp) && resp.data.count) {
+          resp.data.docs.find((job: any) => {
+            if(job.statusId === "SERVICE_PENDING") {
+              this.isCancelationSyncJobEnabled = true;
+              this.cancelJobNextRunTime = job.runTime
+              this.getProcessRefundStatus();
+              return true;
+            }
+          })
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    },
+    async getProcessRefundStatus() {
+      try {
+        const params = {
+          inputFields: {
+            productStoreId: this.currentEComStore?.productStoreId,
+            productStoreId_op: "equals"
+          },
+          entityName: "ShopifyConfig",
+          fieldList: ["shopifyConfigId", "processRefund"],
+          viewSize: 1
+        }
+
+        const resp = await UtilService.getProcessRefundStatus(params);
+        if(!hasError(resp) && resp.data?.count > 0) {
+          this.isProcessRefundEnabled = resp.data.docs[0]?.processRefund === "Y"
+        }
+      } catch(err) {
+        logger.error(err)
+      }
+    },
+    async fetchOrderChangeHistory() {
+      // Only fetching the records those are store pickup related
+      // Added fromFacility check as when customer manually moves order it will be moved from PICKUP_REJECTED queue
+      // Added facilityId check as when order is rejected/canceled it will be moved to PICKUP_REJECTED queue
+      // TODO: need to implement the support to fetch the history for ship orders
+      let orderChangeHistory = []
+      try {
+        let payload = {
+          inputFields: {
+            orderId: this.order.orderId,
+            fromFacilityId_value: "PICKUP_REJECTED",
+            fromFacilityId_op: "equals",
+            fromFacilityId_grp :"1",
+            facilityId_value: "PICKUP_REJECTED",
+            facilityId_op: "equals",
+            facilityId_grp: "2"
+          },
+          entityName: "OrderFacilityChange",
+          orderBy: "changeDatetime DESC",
+          viewSize: 250,
+        }
+
+        const resp = await OrderService.performFind(payload);
+        if(!hasError(resp) && resp.data.docs?.length) {
+          orderChangeHistory = resp.data.docs
+        } else {
+          throw resp.data;
+        }
+      } catch(err) {
+        logger.error("Failed to fetch order change history", err)
+      }
+
+      return orderChangeHistory
+    },
+    async fetchOrderCommunicationEvent() {
+      let orderCommunicationEvent = []
+      try {
+        let payload = {
+          inputFields: {
+            orderId: this.order.orderId,
+            subject: "pickup",
+            subject_op: "contains",
+            communicationEventTypeId: "EMAIL_COMMUNICATION"
+          },
+          entityName: "CommunicationEventAndOrder",
+          viewSize: 250,
+          orderBy: "entryDate ASC",
+          fieldList: ["communicationEventId", "entryDate", "orderId"]
+        }
+
+        const resp = await OrderService.performFind(payload);
+        if(!hasError(resp) && resp.data.docs?.length) {
+          orderCommunicationEvent = resp.data.docs
+        } else {
+          throw resp.data;
+        }
+      } catch(err) {
+        logger.error("Failed to fetch communication events for order", err)
+      }
+
+      return orderCommunicationEvent
+    },
+    sortSequence(sequence: any, sortOnField: string) {
+      return sequence.sort((a: any, b: any) => {
+        if(a[sortOnField] === b[sortOnField]) return 0;
+
+        // Sort undefined values at last
+        if(a[sortOnField] == undefined) return 1;
+        if(b[sortOnField] == undefined) return -1;
+
+        return a[sortOnField] - b[sortOnField]
+      })
+    },
+    async prepareOrderTimeline(paramsToUpdate ?: any) {
+      const timeline = []
+
+      const {orderRouteSegment, shipmentStatusInfo} = await this.fetchOrderRouteSegmentInfo();
+
+      // Get order status using utility method
+      this.orderStatus = this.getOrderStatus({
+        ...this.order,
+        ...paramsToUpdate
+      }, this.order.part, orderRouteSegment)
+
+      let orderChangeHistory = await this.fetchOrderChangeHistory();
+      const orderPickupEmailCommnicationEvent = await this.fetchOrderCommunicationEvent();
+
+      // Removed the first record from the list, the first mail is sent as soon as item is marked for pickup
+      // and we do not need to add the same in the timeline
+      const communicationEvents = orderPickupEmailCommnicationEvent.slice(1).map((event: any) => ({
+        ...event,
+        sortDate: event.entryDate
+      }))
+
+      orderChangeHistory = orderChangeHistory.map((orderChange: any) => ({
+        ...orderChange,
+        sortDate: orderChange.changeDatetime
+      }))
+
+      const orderTimelineComponents = [...communicationEvents, ...orderChangeHistory]
+
+      // Add order creation date to timeline
+      if(this.order.orderDate) {
+        timeline.push({
+          label: "Created in Shopify",
+          id: "orderDate",
+          value: this.order.orderDate,
+          icon: sunnyOutline,
+          valueType: "date-time-millis"
+        })
+      }
+
+      // Add order import date to timeline
+      if(this.order.entryDate) {
+        timeline.push({
+          label: "Imported from Shopify",
+          id: "entryDate",
+          value: this.order.entryDate,
+          icon: downloadOutline,
+          valueType: "date-time-millis",
+          timeDiff: this.findTimeDiff(this.order.orderDate, this.order.entryDate)
+        })
+      }
+
+      // Add order approved date to timeline
+      if(this.order.approvedDate) {
+        timeline.push({
+          label: "Approved for fulfillment",
+          id: "approvedDate",
+          value: this.order.approvedDate,
+          icon: pulseOutline,
+          valueType: "date-time-millis",
+          timeDiff: this.findTimeDiff(this.order.orderDate, this.order.approvedDate)
+        })
+      }
+
+      // Add picker info to timeline
+      if((this.order.pickers?.length && this.order.picklistDate) || this.pickers.length) {
+        const date = this.order.picklistDate || this.picklistDate || DateTime.now().toMillis()
+        timeline.push({
+          label: "Picker assigned",
+          id: "pickerInfo",
+          value: date,
+          icon: personAddOutline,
+          valueType: "date-time-millis",
+          timeDiff: this.findTimeDiff(this.order.orderDate, date),
+          metaData: this.order.pickers || this.pickers
+        })
+      }
+
+      if(orderTimelineComponents.length) {
+        orderTimelineComponents.map((component: any) => {
+          let label = "Pickup remainder"
+          let id = "pickupRemainder"
+          let icon = mailOutline
+          if(component.facilityId === "PICKUP_REJECTED") {
+            label = "Rejected",
+            id = "rejected",
+            icon = trashOutline
+          } else if(component.fromFacilityId === "PICKUP_REJECTED") {
+            label = "Assigned for fulfillment",
+            id = "assigned",
+            icon = medkitOutline
+          }
+
+          timeline.push({
+            label,
+            id,
+            value: component.sortDate,
+            icon,
+            valueType: "date-time-millis",
+            timeDiff: this.findTimeDiff(this.order.orderDate, component.sortDate)
+          })
+        })
+      }
+
+      // Add order completed date to timeline
+      if(this.order.completedDate) {
+        timeline.push({
+          label: this.order.part.shipmentMethodEnum.shipmentMethodEnumId === "STOREPICKUP" ? "Picked up" : "Order completed",
+          id: "completedDate",
+          value: this.order.completedDate,
+          icon: checkmarkDoneOutline,
+          valueType: "date-time-millis",
+          timeDiff: this.findTimeDiff(this.order.orderDate, this.order.completedDate)
+        })
+      }
+
+      const getShipmentPackedDate = shipmentStatusInfo?.find((statusInfo: any) => statusInfo.statusId === "SHIPMENT_PACKED")
+      if(getShipmentPackedDate?.statusDate) {
+        timeline.push({
+          label: "Ready for pickup",
+          id: "packedDate",
+          value: getShipmentPackedDate.statusDate,
+          icon: bagCheckOutline,
+          valueType: "date-time-millis",
+          timeDiff: this.findTimeDiff(this.order.orderDate, getShipmentPackedDate.statusDate)
+        })
+      }
+
+      this.orderTimeline = this.sortSequence(timeline, "value")
+    },
+    async fetchOrderRouteSegmentInfo() {
+      let orderRouteSegment = []
+      let shipmentStatusInfo = []
+      try {
+        const resp = await OrderService.performFind({
+          inputFields: {
+            orderId: this.order.orderId,
+            shipGroupSeqId: this.order.part.orderPartSeqId
+          },
+          fieldList: ["orderId", "shipGroupSeqId", "shipmentId", "shipmentStatusId", "trackingIdNumber"],
+          viewSize: 50,
+          entityName: "OrderShipmentAndRouteSegment"
+        }) as any
+
+        if(!hasError(resp) && resp.data?.docs.length) {
+          orderRouteSegment = resp.data.docs
+
+          if(resp.data.docs[0].shipmentId) {
+            const shipmentStatusResp = await OrderService.performFind({
+              inputFields: {
+                shipmentId: resp.data.docs[0].shipmentId
+              },
+              fieldList: ["shipmentId", "statusId", "statusDate"],
+              viewSize: 50,
+              entityName: "ShipmentAndShipmentStatus"
+            }) as any
+
+            if(!hasError(resp) && shipmentStatusResp.data?.docs.length) {
+              shipmentStatusInfo = shipmentStatusResp.data.docs
+            }
+          }
+        }
+      } catch(err) {
+        logger.error("Failed to fetch route segment info for order")
+      }
+
+      return {
+        orderRouteSegment,
+        shipmentStatusInfo
+      }
+    }
+  },
+  async mounted() {
+    emitter.emit("presentLoader")
+    await this.getOrderDetail(this.orderId, this.orderPartSeqId, this.orderType);
+
+    // fetch rejection reasons only when we get the orders information
+    if(this.order.orderId) {
+      this.orderType === "open" ? await this.fetchRejectReasons() : await this.fetchCancelReasons();
+    }
+
+    if(this.orderType === "packed") {
+      this.fetchJobs();
+      this.hasCancelledItems = this.order.part?.items.some((item: any) => item.cancelReason);
+    } else if(this.orderType === "open") {
+      this.hasRejectedItems = this.order.part?.items.some((item: any) => item.rejectReason);
+    }
+
+    await this.prepareOrderTimeline();
+
+    emitter.emit("dismissLoader")
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+    const userStore = useUserStore()
+    const productIdentificationStore = useProductIdentificationStore();
+    let productIdentificationPref = computed(() => productIdentificationStore.getProductIdentificationPref)
+    let currentFacility: any = computed(() => userStore.getCurrentFacility) 
+
+    return {
+      Actions,
+      bagCheckOutline,
+      bagHandleOutline,
+      bagRemoveOutline,
+      callOutline,
+      caretDownOutline,
+      cashOutline,
+      copyOutline,
+      copyToClipboard,
+      closeCircleOutline,
+      closeOutline,
+      checkmarkCircleOutline,
+      checkmarkDoneOutline,
+      chevronUpOutline,
+      cubeOutline,
+      currentFacility,
+      downloadOutline,
+      formatCurrency,
+      getColorByDesc,
+      getOrderStatus,
+      getProductIdentificationValue,
+      giftOutline,
+      getFeature,
+      hasPermission,
+      informationCircleOutline,
+      isKit,
+      listOutline,
+      locateOutline,
+      personAddOutline,
+      printOutline,
+      productIdentificationPref,
+      pulseOutline,
+      router,
+      store,
+      sunnyOutline,
+      ticketOutline,
+      timeOutline,
+      warningOutline,
+      mailOutline,
+      sendOutline,
+      translate,
+      trashOutline
+    };
+  }
+});
+</script>
+
+<style scoped>
+.border-top {
+  border-top: 1px solid #ccc;
+}
+
+ion-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(314px, max-content));
+  align-items: start;
+}
+
+.order-item {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: var(--spacer-xs) 0;
+}
+
+.product-info {
+  padding: var(--spacer-sm);
+  padding-left: 0;
+}
+
+.product-metadata {
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+  padding-inline-end: var(--spacer-sm);
+  text-align: end;
+}
+
+@media (min-width: 768px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr .75fr;
+    gap: var(--spacer-base);
+    max-width: 1200px;
+    margin-inline: auto;
+    margin-top: var(--spacer-xl);
+  }
+
+  aside {
+    border-left: 1px solid black;
+    grid-column: 2;
+    grid-row: 1;
+  }
+}
+</style>
\ No newline at end of file