diff --git a/src/adapter/index.ts b/src/adapter/index.ts
index 516cd96d3..838deaf65 100644
--- a/src/adapter/index.ts
+++ b/src/adapter/index.ts
@@ -1,8 +1,9 @@
-import { api, client, hasError, initialise, resetConfig, updateInstanceUrl, updateToken, getUserFacilities } from '@hotwax/oms-api'
+import { api, client, getConfig, hasError, initialise, resetConfig, updateInstanceUrl, updateToken, getUserFacilities } from '@hotwax/oms-api'
 
 export {
   api,
   client,
+  getConfig,
   initialise,
   hasError,
   resetConfig,
diff --git a/src/components/OrderInfo.vue b/src/components/OrderInfo.vue
new file mode 100644
index 000000000..c05692f75
--- /dev/null
+++ b/src/components/OrderInfo.vue
@@ -0,0 +1,130 @@
+<template>
+  <section class="orderHeader">
+    <ion-item v-if="order?.readyToHandover || order?.rejected" color="light" lines="none">
+      <ion-icon :icon="order?.readyToHandover ? checkmarkCircleOutline : order?.rejected ? closeCircleOutline : ''" :color="order?.readyToHandover ? 'success' : order?.rejected ? 'danger' : ''" slot="start" />
+      <ion-label class="ion-text-wrap">{{ order?.readyToHandover ? $t("Order is now ready to handover.") : order?.rejected ? $t("Order has been rejected.") : '' }}</ion-label>
+    </ion-item>
+    <ion-list>
+      <ion-item lines="none">
+        <ion-label class="ion-text-wrap">
+          <h2>{{ order?.customer?.name }}</h2>
+          <p>{{ order?.orderName ? order?.orderName : order?.orderId }}</p>
+        </ion-label>
+        <ion-badge v-if="order.placedDate" slot="end">{{ timeFromNow(order.placedDate) }}</ion-badge>
+      </ion-item>
+    </ion-list>
+    <ion-item v-if="customerEmail" lines="none">
+      <ion-icon :icon="mailOutline" slot="start" />
+      <ion-label>{{ customerEmail }}</ion-label>
+      <ion-icon :icon="copyOutline" slot="end" @click="copyToClipboard(customerEmail)" />
+    </ion-item>
+    <ion-item v-if="order.shippingInstructions" color="light" lines="none">
+      <ion-label class="ion-text-wrap">
+        <p class="overline">{{ $t("Handling Instructions") }}</p>
+        <p>{{ order?.shippingInstructions }}</p>
+      </ion-label>
+    </ion-item>
+    <div class="ion-margin-top ion-hide-md-down">
+      <!-- TODO: implement functionality to change shipping address -->
+      <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected" expand="block" @click.stop="emitter.emit('readyForPickupOfOrderDetail', { order, part: order.part })">
+        {{ order?.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? $t("Ready for pickup") : $t("Ready to ship") }}
+      </ion-button>
+      <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected" expand="block" color="danger" fill="outline" @click="emitter.emit('updateOrder', order)">
+        {{ $t("Reject Order") }}
+      </ion-button>
+    </div>
+  </section>
+</template>
+  
+<script lang="ts">
+import {
+  isPlatform,
+  IonBadge,
+  IonButton,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  modalController,
+} from "@ionic/vue";
+import {
+  copyOutline,
+  closeCircleOutline,
+  checkmarkCircleOutline,
+  mailOutline,
+  sendOutline
+} from "ionicons/icons";
+import { defineComponent } from "vue";
+import { mapGetters } from 'vuex'
+import { copyToClipboard } from '@/utils'
+import { hasError } from '@/adapter';
+import { DateTime } from 'luxon';
+import ShipToCustomerModal from "@/components/ShipToCustomerModal.vue";
+import { Actions, hasPermission } from '@/authorization'
+import { OrderService } from "@/services/OrderService";
+import emitter from "@/event-bus";
+
+export default defineComponent({
+  name: "OrderInfo",
+  components: {
+    IonButton,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonBadge
+  },
+  data() {
+    return {
+      customerEmail: '',
+      isDesktop: isPlatform('desktop')
+    }
+  },
+  computed: {
+    ...mapGetters({
+      currentFacility: 'user/getCurrentFacility',
+      order: "order/getCurrent"
+    })
+  },
+  methods: {
+    timeFromNow(time: string) {
+      const timeDiff = DateTime.fromISO(time).diff(DateTime.local());
+      return DateTime.local().plus(timeDiff).toRelative();
+    },
+    async shipToCustomer() {
+      const shipmodal = await modalController.create({
+        component: ShipToCustomerModal,
+      });
+      return shipmodal.present();
+    },
+    async getCustomerContactDetails() {
+      try {
+        const resp = await OrderService.getCustomerContactDetails(this.$route.params.orderId)
+        if (!hasError(resp)) {
+          this.customerEmail = resp.data.orderContacts.email.email
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  },
+  async mounted() {
+    await this.getCustomerContactDetails()
+  },
+  setup() {
+
+    return {
+      Actions,
+      emitter,
+      checkmarkCircleOutline,
+      copyOutline,
+      copyToClipboard,
+      closeCircleOutline,
+      hasPermission,
+      mailOutline,
+      sendOutline
+    };
+  }
+});
+</script>
+  
\ No newline at end of file
diff --git a/src/components/OrderItemRejHistoryModal.vue b/src/components/OrderItemRejHistoryModal.vue
new file mode 100644
index 000000000..b62a59a7c
--- /dev/null
+++ b/src/components/OrderItemRejHistoryModal.vue
@@ -0,0 +1,99 @@
+<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>{{ $t("Order item rejection history") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list v-for="(item, index) in [1]" :key="index">
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ShopifyImg :src="getProduct('10002').mainImageUrl" />
+        </ion-thumbnail>
+        <ion-label>
+          <h5>{{ getProduct("10002").brandName }}</h5>
+          <h2>{{ getProduct("10002").productName }}</h2>
+          <p v-if="$filters.getFeature(getProduct('10002').featureHierarchy, '1/COLOR/')">{{ $t("Color") }}: {{ $filters.getFeature(getProduct("10002").featureHierarchy, '1/COLOR/') }}</p>
+          <p v-if="$filters.getFeature(getProduct('10002').featureHierarchy, '1/SIZE/')">{{ $t("Size") }}: {{ $filters.getFeature(getProduct("10002").featureHierarchy, '1/SIZE/') }}</p>
+        </ion-label>
+        <ion-label slot="end" class="ion-text-right">
+          <h2>{{ 'Not in stock' }}</h2>
+          <p>{{ $t('Rejected by', { userName: 'user-name', rejectionTime: 'rejection-time' }) }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+
+    <!-- Empty state -->
+    <div v-if="!([1,3].length)" class="empty-state">
+      <p>{{ $t('No records found.') }}</p>
+    </div>
+  </ion-content>
+</template>
+  
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonThumbnail,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline } from 'ionicons/icons';
+import { mapGetters, useStore } from "vuex";
+
+export default defineComponent({
+  name: "OrderItemRejHistoryModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonThumbnail,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  },
+  computed: {
+    ...mapGetters({
+      getProduct: 'product/getProduct',
+      order: "order/getCurrent",
+      rejectReasons: 'util/getRejectReasons',
+      rejectionHistory: 'order/getOrderItemRejectionHistory'
+    })
+  },
+  async mounted() {
+    await this.store.dispatch('order/getOrderItemRejHistory', { orderId: this.order.orderId, rejectReasons: this.rejectReasons.reduce((enumIds: [], reason: any) => [ ...enumIds, reason.enumId ], []) });
+    console.log('--- ', this.rejectionHistory);
+    
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      store
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/components/ProductListItem.vue b/src/components/ProductListItem.vue
index 29fcf4020..36bb82836 100644
--- a/src/components/ProductListItem.vue
+++ b/src/components/ProductListItem.vue
@@ -12,7 +12,7 @@
       <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
-    <ion-note v-if="!isShipToStoreOrder" slot="end">{{ getProductStock(item.productId) }} {{ $t("in stock") }}</ion-note>
+    <ion-note v-if="!isShipToStoreOrder" slot="end" :color="updateColor(getProductStock(item.productId))">{{ getProductStock(item.productId) }} {{ $t("in stock") }}</ion-note>
   </ion-item>
 </template>
 
@@ -46,6 +46,11 @@ export default {
       getProduct: 'product/getProduct',
       getProductStock: 'stock/getProductStock'
     })
+  },
+  methods: {
+    updateColor(stock: number) {
+      return stock ? stock < 10 ? 'warning' : 'success' : 'danger';
+    }
   }
 }
 </script>
diff --git a/src/components/ReportAnIssueModal.vue b/src/components/ReportAnIssueModal.vue
new file mode 100644
index 000000000..600ed2275
--- /dev/null
+++ b/src/components/ReportAnIssueModal.vue
@@ -0,0 +1,116 @@
+<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>{{ $t("Report an issue") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-item lines="none">
+      <p>{{ $t('On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.', { customerName: order.customer?.name }) }}</p>
+    </ion-item>
+    <ion-list>
+      <ion-list-header>{{ $t("Select reason") }}</ion-list-header>
+      <ion-radio-group v-model="rejectReasonId">
+        <ion-item v-for="reason in unfillableReason" :key="reason.id">
+          <ion-radio slot="start" :value="reason.id"/>
+          <ion-label>{{ $t(reason.label) }}</ion-label>
+        </ion-item>
+      </ion-radio-group>
+    </ion-list>
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button :disabled="!rejectReasonId" @click="confirmSave()">
+        <ion-icon :icon="saveOutline" />
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+    
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonTitle,
+  IonToolbar,
+  modalController,
+  IonRadio,
+  IonRadioGroup
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline, saveOutline } from 'ionicons/icons';
+import { mapGetters, useStore } from 'vuex'
+
+export default defineComponent({
+  name: "ReportAnIssueModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonTitle,
+    IonToolbar,
+    IonRadio,
+    IonRadioGroup
+  },
+  props: ['item'],
+  data () {
+    return {
+      unfillableReason: JSON.parse(process.env.VUE_APP_UNFILLABLE_REASONS),
+      rejectReasonId: ''
+    }
+  },
+  computed: {
+    ...mapGetters({
+      order: "order/getCurrent"
+    })
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    confirmSave () {
+      this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: this.order.orderId, part: { ...this.order.part, items: [{ ...this.item, reason: this.rejectReasonId }] } }).then((resp) => {
+        if (resp) {
+          // creating an current order copy by removing the selected item from the order.part
+          const order = { ...this.order, part: { ...this.order.part, items: this.order.part.items.filter((item: any) => !(item.orderItemSeqId === this.item.orderItemSeqId && item.productId === this.item.productId)) }};
+    
+          // If this is the last item of the order then the order is fully rejected
+          if(this.order.part.items.length === 1) order.rejected = true;
+  
+          this.store.dispatch('order/updateCurrent', { order });
+        }
+        this.closeModal();
+      })
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      saveOutline,
+      store
+    };
+  }
+});
+</script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 1b431448b..b4900031e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -63,15 +63,18 @@
   "No reason": "No reason",
   "No picker assigned.": "No picker assigned.",
   "No picker found": "No picker found",
+  "No records found.": "No records found.",
   "No time zone found": "No time zone found",
   "Open": "Open",
   "OMS": "OMS",
   "OMS instance": "OMS instance",
+  "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "On rejecting this item, { customerName } will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.",
   "Other stores inventory": "Other stores inventory",
   "Order": "Order",
   "Order delivered to": "Order delivered to { customerName }",
   "Order details": "Order details",
   "Order edit permissions": "Order edit permissions",
+  "Order is now ready for handover.": "Order is now ready for handover.",
   "Order marked as ready for pickup, an email notification has been sent to the customer": "Order marked as ready for pickup, an email notification has been sent to the customer",
   "Order marked as ready for pickup but something went wrong while sending the email notification": "Order marked as ready for pickup but something went wrong while sending the email notification",
   "Order not found": "Order not found",
@@ -80,6 +83,7 @@
   "Order will be marked as completed. This action is irreversible.": "Order will be marked as completed. This action is irreversible.",
   "Orders": "Orders",
   "Orders Not Found": "Orders Not Found",
+  "Order item rejection history": "Order item rejection history",
   "Other stores": "Other stores",
   "Packed": "Packed",
   "Packing Slip": "Packing Slip",
@@ -96,12 +100,15 @@
   "Ready to create an app?": "Ready to create an app?",
   "Ready to ship": "Ready to ship",
   "Reject Order": "Reject Order",
+  "Rejected by": "Rejected by { username } | { rejectionTime }",
   "Reason": "Reason",
+  "Report an issue": "Report an issue",
   "Resend ready for pickup email": "Resend ready for pickup email",
   "Search": "Search",
   "Search Orders": "Search Orders",
   "Search time zones": "Search time zones",
   "Select facility": "Select facility",
+  "Select reason": "Select reason",
   "Select time zone": "Select time zone",
   "Select your preferred language.": "Select your preferred language.",
   "Settings": "Settings",
diff --git a/src/locales/es.json b/src/locales/es.json
index c0b8f9b9d..ff4fda183 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -62,15 +62,18 @@
   "No reason": "Sin razón",
   "No picker assigned.": "No picker assigned.",
   "No picker found": "No se encontró recolector",
+  "No records found.": "No records found.",
   "No time zone found": "No se encontró zona horaria",
   "Open": "Abierto",
   "OMS": "OMS",
   "OMS instance": "Instancia de OMS",
+  "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "On rejecting this item, { customerName } will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.",
   "Other stores inventory": "Inventario de otras tiendas",
   "Order": "Orden",
   "Order delivered to": "Orden entregada a {customerName}",
   "Order details": "Detalles de la orden",
   "Order edit permissions": "Permisos de edición de la orden",
+  "Order is now ready for handover.": "Order is now ready for handover.",
   "Order marked as ready for pickup, an email notification has been sent to the customer": "Pedido marcado como listo para recoger, se ha enviado una notificación por correo electrónico al cliente",
   "Order marked as ready for pickup but something went wrong while sending the email notification": "Pedido marcado como listo para recoger pero algo salió mal al enviar la notificación por correo electrónico",
   "Order not found": "Orden no encontrada",
@@ -79,6 +82,7 @@
   "Order will be marked as completed. This action is irreversible.": "El pedido se marcará como completado. Esta acción es irreversible.",
   "Orders": "Órdenes",
   "Orders Not Found": "Órdenes no encontradas",
+  "Order item rejection history": "Order item rejection history",
   "Other stores": "Otras tiendas",
   "Packed": "Empacado",
   "Packing Slip": "Remisión de embalaje",
@@ -95,12 +99,15 @@
   "Ready to create an app?": "¿Listo para crear una aplicación?",
   "Ready to ship": "Listo para enviar",
   "Reject Order": "Rechazar pedido",
+  "Rejected by": "Rejected by { username } | { rejectionTime }",
   "Reason": "Razón",
+  "Report an issue": "Report an issue",
   "Resend ready for pickup email": "Reenviar correo electrónico de listo para recoger",
   "Search": "Buscar",
   "Search Orders": "Buscar pedidos",
   "Search time zones": "Buscar zonas horarias",
   "Select facility": "Seleccionar instalación",
+  "Select reason": "Select reason",
   "Select time zone": "Seleccionar zona horaria",
   "Select your preferred language.": "Selecciona tu idioma preferido.",
   "Settings": "Configuraciones",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 9035ef998..b8b266929 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -62,15 +62,18 @@
   "No reason": "理由なし",
   "No picker assigned.": "No picker assigned.",
   "No picker found": "受取人が見つかりません",
+  "No records found.": "No records found.",
   "No time zone found": "タイムゾーンが見つかりません",
   "Open": "オープン",
   "OMS": "OMS",
   "OMS instance": "OMSインスタンス",
+  "On rejecting this item, will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.": "On rejecting this item, { customerName } will be sent an email with alternate fulfillment options and this order item will be removed from your dashboard.",
   "Other stores inventory": "その他店舗在庫",
   "Order": "注文",
   "Order delivered to": "注文は { customerName }様 に配達されました",
   "Order details": "注文詳細",
   "Order edit permissions": "注文の編集権限",
+  "Order is now ready for handover.": "Order is now ready for handover.",
   "Order marked as ready for pickup, an email notification has been sent to the customer": "注文された商品の受取準備完了とマークされ、Eメールによる通知がお客様に送信されました。",
   "Order marked as ready for pickup but something went wrong while sending the email notification": "注文された商品の受取準備完了とマークされましたが、Eメールによる通知の送信中に何かしらの問題が発生しました。",
   "Order not found": "注文が見つかりません",
@@ -79,6 +82,7 @@
   "Order will be marked as completed. This action is irreversible.": "注文の完了がマークされます。この操作は元に戻せません。",
   "Orders": "注文",
   "Orders Not Found": "注文が見つかりません",
+  "Order item rejection history": "Order item rejection history",
   "Other stores": "Other stores",
   "Packed": "梱包済み",
   "Packing slip": "納品書",
@@ -95,12 +99,15 @@
   "Ready to create an app?": "アプリを作成する準備はできましたか?",
   "Ready to ship": "出荷する準備ができました",
   "Reject Order": "注文を拒否",
+  "Rejected by": "Rejected by { username } | { rejectionTime }",
   "Reason": "理由",
+  "Report an issue": "Report an issue",
   "Resend ready for pickup email": "受取準備完了メールの再送",
   "Search": "検索",
   "Search Orders": "注文の検索",
   "Search time zones": "タイムゾーンの検索",
   "Select facility": "拠点の検索",
+  "Select reason": "Select reason",
   "Select time zone": "タイムゾーンを選択",
   "Select your preferred language.": "お好みの言語の選択",
   "Settings": "設定",
diff --git a/src/main.ts b/src/main.ts
index 40d435f8f..c74a9d169 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -33,6 +33,7 @@ import permissionRules from '@/authorization/Rules';
 import permissionActions from '@/authorization/Actions';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
+import { getConfig, initialise } from './adapter';
 
 const app = createApp(App)
   .use(IonicVue, {
@@ -50,7 +51,9 @@ const app = createApp(App)
     login,
     logout,
     loader,
-    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string
+    appLoginUrl: process.env.VUE_APP_LOGIN_URL as string,
+    getConfig,
+    initialise
   });
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
diff --git a/src/services/OrderService.ts b/src/services/OrderService.ts
index 30bcb6cd0..6ac229c78 100644
--- a/src/services/OrderService.ts
+++ b/src/services/OrderService.ts
@@ -128,11 +128,20 @@ const getShipmentItems = async (shipmentIds: any): Promise<any> => {
   }, [])
 }
 
+const getOrderItemRejHistory = async (payload: any): Promise<any> => {
+  return api({
+    url: 'performFind',
+    method: 'POST',
+    data: payload
+  })
+}
+
 export const OrderService = {
   getOpenOrders,
   getOrderDetails,
   getCompletedOrders,
   getPackedOrders,
+  getOrderItemRejHistory,
   quickShipEntireShipGroup,
   rejectOrderItem,
   updateShipment,
diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
new file mode 100644
index 000000000..89a936062
--- /dev/null
+++ b/src/services/UtilService.ts
@@ -0,0 +1,14 @@
+import { api } from '@/adapter';
+
+const fetchRejectReasons = async(query: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "get",
+    params: query,
+    cache: true
+  })
+}
+
+export const UtilService = {
+  fetchRejectReasons
+}
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 6cd710b94..2ce954f6d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,6 +5,7 @@ import actions from './actions'
 import RootState from './RootState'
 import createPersistedState from "vuex-persistedstate";
 import userModule from './modules/user';
+import utilModule from "./modules/util"
 import orderModule from './modules/order';
 import stockModule from "./modules/stock"
 import productModule from "./modules/product"
@@ -20,7 +21,7 @@ const state: any = {
 }
 
 const persistState = createPersistedState({
-    paths: ['user'],
+    paths: ['user', 'order.current'],
     fetchBeforeUse: true
 })
 
@@ -35,7 +36,8 @@ const store = createStore<RootState>({
         'user': userModule,
         'order': orderModule,
         'stock': stockModule,
-        'product': productModule
+        'product': productModule,
+        'util': utilModule
     },
 })
 
diff --git a/src/store/modules/order/OrderState.ts b/src/store/modules/order/OrderState.ts
index b371f21af..2c6e2b312 100644
--- a/src/store/modules/order/OrderState.ts
+++ b/src/store/modules/order/OrderState.ts
@@ -1,5 +1,6 @@
 export default interface OrderState {
   open: any;
+  orderItemRejectionHistory: [];
   current: any;
   packed: any;
   completed: any;
diff --git a/src/store/modules/order/actions.ts b/src/store/modules/order/actions.ts
index 8db8d6b27..60008d109 100644
--- a/src/store/modules/order/actions.ts
+++ b/src/store/modules/order/actions.ts
@@ -100,9 +100,10 @@ const actions: ActionTree<OrderState , RootState> ={
   async getOrderDetail( { dispatch, state }, payload ) {
     const current = state.current as any
     const orders = JSON.parse(JSON.stringify(state.open.list)) as any
-
-    if(current.orderId === payload.orderId) { return current }
-
+    if(current.orderId === payload.orderId) { 
+      this.dispatch('product/getProductInformation', { orders: [ current ] })
+      return current 
+    }
     if(orders.length) {
       const order = orders.find((order: any) => {
         return order.orderId === payload.orderId;
@@ -112,7 +113,6 @@ const actions: ActionTree<OrderState , RootState> ={
         return order;
       }
     }
-
     const orderQueryPayload = prepareOrderQuery({
       ...payload,
       shipmentMethodTypeId: !store.state.user.preference.showShippingOrders ? 'STOREPICKUP' : '',
@@ -450,6 +450,9 @@ const actions: ActionTree<OrderState , RootState> ={
             }
           })
         }
+        // Mark current order as ready to handover
+        dispatch('updateCurrent', { order : { ...payload.order, readyToHandover: true } })
+
         showToast(translate("Order packed and ready for delivery"))
       } else {
         showToast(translate("Something went wrong"))
@@ -470,7 +473,7 @@ const actions: ActionTree<OrderState , RootState> ={
     return await dispatch("rejectOrderItems", payload).then((resp) => {
       const refreshPickupOrders = resp.find((response: any) => !(response.data._ERROR_MESSAGE_ || response.data._ERROR_MESSAGE_LIST_))
       if (refreshPickupOrders) {
-        showToast(translate('All items were canceled from the order') + ' ' + payload.orderId);
+        showToast(payload.part.items.length === 1 ? translate('Item has been rejected successfully') : translate('All items were canceled from the order') + ' ' + payload.orderId);
       } else {
         showToast(translate('Something went wrong'));
       }
@@ -764,6 +767,36 @@ const actions: ActionTree<OrderState , RootState> ={
     return resp;
   },
 
+  async getOrderItemRejHistory({ commit, state }, payload) {
+    let rejectionHistory = [] as any;
+
+    try {
+      const params = {
+        inputFields: {
+          orderId: payload.orderId,
+          orderId_op: "equals",
+          changeReasonEnumId: payload.rejectReasons,
+          changeReasonEnumId_op: "in",
+        },
+        fieldList: ['orderItemSeqId', 'changeDatetime', 'changeUserLogin'],
+        entityName: 'OrderFacilityChange',
+        orderBy: 'changeDatetime DESC',
+        viewSize: 20,
+      }
+      const resp = await OrderService.getOrderItemRejHistory(params);
+
+      if (!hasError(resp) && resp.data.count > 0) {
+        rejectionHistory = resp.data.docs;
+      } else {
+        throw resp.data
+      }
+    } catch (err) {
+      console.error('Failed to fetch order item rejection history', err)
+    }
+
+    commit(types.ORDER_ITEM_REJECTION_HISTORY_UPDATED, rejectionHistory)
+  },
+
   // clearning the orders state when logout, or user store is changed
   clearOrders ({ commit }) {
     commit(types.ORDER_OPEN_UPDATED, {orders: {} , total: 0})
diff --git a/src/store/modules/order/getters.ts b/src/store/modules/order/getters.ts
index 82d173ef6..290265522 100644
--- a/src/store/modules/order/getters.ts
+++ b/src/store/modules/order/getters.ts
@@ -41,7 +41,10 @@ const getters: GetterTree<OrderState , RootState> = {
   },
   isShipToStoreCmpltdOrdrsScrlbl: (state) => {
     return state.shipToStore.completed.list.length > 0 && state.shipToStore.completed.list.length < state.shipToStore.completed.total
-  }
+  },
+  getOrderItemRejectionHistory: (state) => {
+    return state.orderItemRejectionHistory
+  },
 }
 
 export default getters;
\ No newline at end of file
diff --git a/src/store/modules/order/index.ts b/src/store/modules/order/index.ts
index 805e87a3a..e12f8edd7 100644
--- a/src/store/modules/order/index.ts
+++ b/src/store/modules/order/index.ts
@@ -10,6 +10,7 @@ const orderModule: Module<OrderState, RootState> = {
   namespaced: true,
   state: {
     current: {},
+    orderItemRejectionHistory: [],
     open: {
       list: {},
       total: 0
@@ -35,7 +36,7 @@ const orderModule: Module<OrderState, RootState> = {
         list: {},
         total: 0
       }
-    }
+    },
   },
   getters,
   actions,
diff --git a/src/store/modules/order/mutation-types.ts b/src/store/modules/order/mutation-types.ts
index e3a3ebc68..ba6c87335 100644
--- a/src/store/modules/order/mutation-types.ts
+++ b/src/store/modules/order/mutation-types.ts
@@ -6,3 +6,4 @@ export const ORDER_COMPLETED_UPDATED = SN_ORDER + '/COMPLETED_UPDATED'
 export const ORDER_SHIP_TO_STORE_INCOMING_UPDATED = SN_ORDER + '/SHIP_TO_STORE_INCOMING_UPDATED'
 export const ORDER_SHIP_TO_STORE_RDYFORPCKUP_UPDATED = SN_ORDER + '/SHIP_TO_STORE_RDYFORPCKUP_UPDATED'
 export const ORDER_SHIP_TO_STORE_COMPLETED_UPDATED = SN_ORDER + '/SHIP_TO_STORE_COMPLETED_UPDATED'
+export const ORDER_ITEM_REJECTION_HISTORY_UPDATED = SN_ORDER + '/SHIP_TO_STORE_COMPLETED_UPDATED'
diff --git a/src/store/modules/order/mutations.ts b/src/store/modules/order/mutations.ts
index dd807363d..6d0780814 100644
--- a/src/store/modules/order/mutations.ts
+++ b/src/store/modules/order/mutations.ts
@@ -29,6 +29,9 @@ const mutations: MutationTree <ProductState> = {
   [types.ORDER_SHIP_TO_STORE_COMPLETED_UPDATED] (state, payload) {
     state.shipToStore.completed.list = payload.orders
     state.shipToStore.completed.total = payload.total
+  },
+  [types.ORDER_ITEM_REJECTION_HISTORY_UPDATED] (state, payload) {
+    state.orderItemRejectionHistory = payload
   }
 }
 
diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
index a03c2aea9..39c805df9 100644
--- a/src/store/modules/user/getters.ts
+++ b/src/store/modules/user/getters.ts
@@ -27,6 +27,9 @@ const getters: GetterTree <UserState, RootState> = {
         const baseUrl = process.env.VUE_APP_BASE_URL;
         return baseUrl ? baseUrl : state.instanceUrl;
     },
+    partialOrderRejection (state) {
+        return state.preference.partialOrderRejection;
+    },
     showShippingOrders (state) {
         return state.preference.showShippingOrders;
     },
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index d1e01d1d6..b98064ada 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -16,6 +16,7 @@ const userModule: Module<UserState, RootState> = {
         showShippingOrders: true,
         showPackingSlip: false,
         configurePicker: false,
+        partialOrderRejection: false
       },
       locale: 'en',
       currentEComStore: {},
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
new file mode 100644
index 000000000..40c0fb62b
--- /dev/null
+++ b/src/store/modules/util/UtilState.ts
@@ -0,0 +1,3 @@
+export default interface UtilState {
+  rejectReasons: [];
+}
\ No newline at end of file
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
new file mode 100644
index 000000000..1c2d6e88e
--- /dev/null
+++ b/src/store/modules/util/actions.ts
@@ -0,0 +1,37 @@
+import { ActionTree } from 'vuex'
+import RootState from '@/store/RootState'
+import UtilState from './UtilState'
+import * as types from './mutation-types'
+import { UtilService } from '@/services/UtilService'
+import { hasError } from '@/adapter'
+
+const actions: ActionTree<UtilState, RootState> = {
+  async fetchRejectReasons({ commit }) {
+    let rejectReasons  = [];
+    try {
+      const payload = {
+        "inputFields": {
+          "parentEnumTypeId": ["REPORT_AN_ISSUE", "RPRT_NO_VAR_LOG"]
+        },
+        "fieldList": ["enumId", "description"],
+        "distinct": "Y",
+        "entityName": "EnumTypeChildAndEnum",
+        "viewSize": 20 // keeping view size 20 as considering that we will have max 20 reasons
+      }
+
+      const resp = await UtilService.fetchRejectReasons(payload)
+
+      if(!hasError(resp) && resp.data.count > 0) {
+        rejectReasons = resp.data.docs
+      } else {
+        throw resp.data
+      }
+    } catch (err) {
+      console.error('Failed to fetch reject reasons', err)
+    }
+
+    commit(types.UTIL_REJECT_REASONS_UPDATED, rejectReasons)
+  }
+}
+
+export default actions;
\ No newline at end of file
diff --git a/src/store/modules/util/getters.ts b/src/store/modules/util/getters.ts
new file mode 100644
index 000000000..ea30c97ba
--- /dev/null
+++ b/src/store/modules/util/getters.ts
@@ -0,0 +1,10 @@
+import { GetterTree } from 'vuex'
+import UtilState from './UtilState'
+import RootState from '@/store/RootState'
+
+const getters: GetterTree <UtilState, RootState> = {
+  getRejectReasons(state) {
+    return state.rejectReasons ? state.rejectReasons : []
+  }
+}
+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
new file mode 100644
index 000000000..c3d84ab42
--- /dev/null
+++ b/src/store/modules/util/index.ts
@@ -0,0 +1,17 @@
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import { Module } from 'vuex'
+import RootState from '@/store/RootState'
+import UtilState from './UtilState'
+
+const utilModule: Module<UtilState, RootState> = {
+  namespaced: true,
+  state: {
+    rejectReasons: []
+  },
+  getters,
+  actions,
+  mutations,
+}
+export default utilModule;
\ No newline at end of file
diff --git a/src/store/modules/util/mutation-types.ts b/src/store/modules/util/mutation-types.ts
new file mode 100644
index 000000000..0a0a289f7
--- /dev/null
+++ b/src/store/modules/util/mutation-types.ts
@@ -0,0 +1,2 @@
+export const SN_UTIL = 'util'
+export const UTIL_REJECT_REASONS_UPDATED = SN_UTIL + '/REJECT_REASONS_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/util/mutations.ts b/src/store/modules/util/mutations.ts
new file mode 100644
index 000000000..5ffa976f9
--- /dev/null
+++ b/src/store/modules/util/mutations.ts
@@ -0,0 +1,10 @@
+import { MutationTree } from 'vuex'
+import UtilState from './UtilState'
+import * as types from './mutation-types'
+
+const mutations: MutationTree <UtilState> = {
+  [types.UTIL_REJECT_REASONS_UPDATED] (state, payload) {
+    state.rejectReasons = payload
+  }
+}
+export default mutations;
\ No newline at end of file
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 6a77ae08d..b11ed55fb 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -76,6 +76,23 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-tint: #f5f6f9;
 }
 
+.empty-state {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+}
+
+.empty-state > img {
+  object-fit: contain;
+}
+
+.empty-state > p {
+  text-align: center; 
+}
+
 @media (prefers-color-scheme: dark) {
   /*
    * Dark Colors
diff --git a/src/views/AssignPickerModal.vue b/src/views/AssignPickerModal.vue
index 71e9ee641..870685d45 100644
--- a/src/views/AssignPickerModal.vue
+++ b/src/views/AssignPickerModal.vue
@@ -7,7 +7,7 @@
         </ion-button>
       </ion-buttons>
       <ion-title>{{ $t("Assign Pickers") }}</ion-title>
-      <ion-button fill="clear" slot="end" @click="readyForPickup()">{{ part.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? $t("Ready for pickup") : $t("Ready to ship") }}</ion-button>
+      <ion-button fill="clear" slot="end" @click="readyForPickup()">{{ part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? $t("Ready for pickup") : $t("Ready to ship") }}</ion-button>
     </ion-toolbar>
   </ion-header>
 
diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
index 4dbd530be..35e4b30e9 100644
--- a/src/views/OrderDetail.vue
+++ b/src/views/OrderDetail.vue
@@ -4,147 +4,155 @@
       <ion-toolbar>
         <ion-back-button default-href="/" slot="start" />
         <ion-title>{{ $t("Order details") }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button @click="openOrderItemRejHistoryModal()">
+            <ion-icon slot="icon-only" :icon="timeOutline" />
+          </ion-button>
+          <ion-button v-if="!isDesktop" :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected" @click="updateOrder(order)">
+            <ion-icon slot="icon-only" color="danger" :icon="bagRemoveOutline" />
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
+
     <ion-content>
       <main>
-        <ion-list>
-          <ion-item lines="none">
+        <aside class="orderHeader">
+          <ion-item v-if="order?.readyToHandover || order?.rejected" color="light" lines="none">
+            <ion-icon :icon="order?.readyToHandover ? checkmarkCircleOutline : order?.rejected ? closeCircleOutline : ''" :color="order?.readyToHandover ? 'success' : order?.rejected ? 'danger' : ''" slot="start" />
+            <ion-label class="ion-text-wrap">{{ order?.readyToHandover ? $t("Order is now ready to handover.") : order?.rejected ? $t("Order has been rejected.") : '' }}</ion-label>
+          </ion-item>
+          <ion-list>
+            <ion-item lines="none">
+              <ion-label class="ion-text-wrap">
+                <h2>{{ order?.customer?.name }}</h2>
+                <p>{{ order?.orderName ? order?.orderName : order?.orderId }}</p>
+              </ion-label>
+              <ion-badge v-if="order.placedDate" slot="end">{{ timeFromNow(order.placedDate) }}</ion-badge>
+            </ion-item>
+          </ion-list>
+          <ion-item v-if="customerEmail" lines="none">
+            <ion-icon :icon="mailOutline" slot="start" />
+            <ion-label>{{ customerEmail }}</ion-label>
+            <ion-icon :icon="copyOutline" slot="end" @click="copyToClipboard(customerEmail)" />
+          </ion-item>
+          <ion-item v-if="order.shippingInstructions" color="light" lines="none">
             <ion-label class="ion-text-wrap">
-              <h2>{{ order.customer?.name }}</h2>
-              <p>{{ order.orderName ? order.orderName : order.orderId }}</p>
+              <p class="overline">{{ $t("Handling Instructions") }}</p>
+              <p>{{ order?.shippingInstructions }}</p>
             </ion-label>
-            <ion-badge v-if="order.placedDate" color="dark" slot="end">{{ timeFromNow(order.placedDate) }}</ion-badge>
-          </ion-item>
-        </ion-list>
-        <ion-item v-if="order.shippingInstructions" color="light" lines="none">
-          <ion-label class="ion-text-wrap">
-            <p class="overline">{{ $t("Handling Instructions") }}</p>
-            <p>{{ order.shippingInstructions }}</p>
-          </ion-label>
-        </ion-item>
-        <ion-item v-if="customerEmail" lines="none">
-          <ion-icon :icon="mailOutline" slot="start" />
-          <ion-label>{{ customerEmail }}</ion-label>
-          <ion-button
-            fill="outline"
-            slot="end"
-            color="medium"
-            @click="copyToClipboard(customerEmail)"
-          >
-            {{ $t("Copy") }}
-          </ion-button>
-        </ion-item>
-
-        <ion-card v-for="(item, index) in getCurrentOrderPart()?.items" :key="index">
-          <ProductListItem :item="item" />
-          <ion-item lines="none" class="border-top">
-            <ion-label>{{ $t("Reason") }}</ion-label>
-            <ion-select multiple="false" v-model="item.reason">
-              <ion-select-option v-for="reason in unfillableReason" :value="reason.id" :key="reason.id">{{ $t(reason.label) }}</ion-select-option>
-            </ion-select>
           </ion-item>
-        </ion-card>
-
-        <!-- TODO: implement functionality to change shipping address -->
-        <!-- <ion-button expand="block" fill="outline" @click="shipToCustomer()">
-          {{ $t("Ship to customer") }}
-          <ion-icon :icon="sendOutline" slot="end" />
-        </ion-button> -->
+          <div class="ion-margin-top ion-hide-md-down">
+            <!-- TODO: implement functionality to change shipping address -->
+            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected" expand="block" @click.stop="emitter.emit('readyForPickupOfOrderDetail', { order, part: order.part })">
+              {{ order?.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP' ? $t("Ready for pickup") : $t("Ready to ship") }}
+            </ion-button>
+            <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected" expand="block" color="danger" fill="outline" @click="emitter.emit('updateOrder', order)">
+              {{ $t("Reject Order") }}
+            </ion-button>
+          </div>
+        </aside>
+        <section>
+          <ion-card v-for="(item, index) in order.part?.items" :key="index">
+            <ProductListItem :item="item" />
+            <div v-if="partialOrderRejection" class="border-top">
+              <ion-button fill="clear" @click="openReportAnIssueModal(item)">
+                {{ $t("Report an issue") }}
+              </ion-button>
+            </div>
+          </ion-card>
+        </section>
+      </main>
 
-        <ion-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE)" expand="block" color="danger" fill="outline" @click="updateOrder(order)">
-          {{ $t("Reject Order") }}
-        </ion-button>
-      </main>  
+      <ion-fab v-if="!isDesktop" vertical="bottom" horizontal="end" slot="fixed" @click="readyForPickup({ order, part: order.part })">
+        <ion-fab-button :disabled="!hasPermission(Actions.APP_ORDER_UPDATE) || order?.readyToHandover || order?.rejected">
+          <ion-icon :icon="bagHandleOutline" />
+        </ion-fab-button>
+      </ion-fab>
     </ion-content>
   </ion-page>
 </template>
 
-<script>
+<script lang="ts">
 import {
   alertController,
   IonBackButton,
-  IonBadge,
   IonButton,
+  IonButtons,
   IonCard,
   IonContent,
   IonHeader,
   IonIcon,
   IonItem,
-  IonLabel,
-  IonList,
   IonPage,
-  IonSelect,
-  IonSelectOption,
   IonTitle,
   IonToolbar,
-  modalController
+  IonFab,
+  IonFabButton,
+  modalController,
+  isPlatform,
 } from "@ionic/vue";
 import { defineComponent } from "vue";
 import { mapGetters, useStore } from "vuex";
-import {
-  sendOutline,
-  swapVerticalOutline,
-  callOutline,
-  mailOutline,
-} from "ionicons/icons";
+import { bagHandleOutline, bagRemoveOutline, timeOutline } from "ionicons/icons";
 import ProductListItem from '@/components/ProductListItem.vue'
-import { copyToClipboard } from '@/utils'
-import { hasError } from '@/adapter';
 import { useRouter } from 'vue-router'
-import { DateTime } from 'luxon';
-import ShipToCustomerModal from "@/components/ShipToCustomerModal.vue";
 import { Actions, hasPermission } from '@/authorization'
-import { OrderService } from "@/services/OrderService";
+import OrderItemRejHistoryModal from '@/components/OrderItemRejHistoryModal.vue';
+import ReportAnIssueModal from '@/components/ReportAnIssueModal.vue';
+import OrderInfo from '@/components/OrderInfo.vue';
+import emitter from "@/event-bus"
+import AssignPickerModal from "@/views/AssignPickerModal.vue";
 
 export default defineComponent({
   name: "OrderDetail",
-  props: ['orderId'],
   components: {
     IonBackButton,
-    IonBadge,
     IonButton,
+    IonButtons,
     IonCard,
     IonContent,
     IonHeader,
     IonIcon,
     IonItem,
-    IonLabel,
-    IonList,
     IonPage,
-    IonSelect,
-    IonSelectOption,
     IonTitle,
     IonToolbar,
-    ProductListItem
+    ProductListItem,
+    OrderInfo,
+    IonFab,
+    IonFabButton,
   },
   data () {
     return {
-      unfillableReason: JSON.parse(process.env.VUE_APP_UNFILLABLE_REASONS),
-      customerEmail: ''
+      isDesktop: isPlatform('desktop')
     }
   },
   computed: {
     ...mapGetters({
       order: "order/getCurrent",
       currentFacility: 'user/getCurrentFacility',
+      configurePicker: "user/configurePicker",
+      partialOrderRejection: 'user/partialOrderRejection'
     })
   },
-  ionViewDidEnter() {
-    if(this.order.items) this.order.items.map((item) => item['reason'] = this.unfillableReason[0].id);
-  },
   methods: {
-    timeFromNow (time) {
-      const timeDiff = DateTime.fromISO(time).diff(DateTime.local());
-      return DateTime.local().plus(timeDiff).toRelative();
-    },
-    async shipToCustomer() {
-      const shipmodal = await modalController.create({
-        component: ShipToCustomerModal,
+    async assignPicker(order: any, part: any, facilityId: any) {      
+      const assignPickerModal = await modalController.create({
+        component: AssignPickerModal,
+        componentProps: { order, part, facilityId }
       });
-      return shipmodal.present();
+      return assignPickerModal.present();
     },
-    async updateOrder (order) {
+    async getOrderDetail(orderId: any, orderPartSeqId: any) {
+      const payload = {
+        facilityId: this.currentFacility.facilityId,
+        orderId,
+        orderPartSeqId
+      }
+      await this.store.dispatch("order/getOrderDetail", payload)
+    },
+    async updateOrder(order: any) {
       const alert = await alertController
         .create({
           header: this.$t('Update Order'),
@@ -152,45 +160,68 @@ export default defineComponent({
           buttons: [{
             text: this.$t('Cancel'),
             role: 'cancel'
-          },{
+          }, {
             text: this.$t('Reject Order'),
             handler: () => {
-              this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: order.orderId, part: this.getCurrentOrderPart() }).then((resp) => {
-                if (resp) this.router.push('/tabs/orders')
+              this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: order.orderId, part: order.part }).then((resp) => {
+                if (resp) {
+                  // Mark current order as rejected
+                  this.store.dispatch('order/updateCurrent', { order : { ...order, rejected: true } })
+                }
               })
             },
           }]
         });
       return alert.present();
     },
-    async getOrderDetail(orderId, orderPartSeqId) {
-      const payload = {
-        facilityId: this.currentFacility.facilityId,
-        orderId,
-        orderPartSeqId
-      }
-      await this.store.dispatch("order/getOrderDetail", payload)
+    async openOrderItemRejHistoryModal(){
+      const orderItemRejHistoryModal = await modalController.create({
+        component: OrderItemRejHistoryModal,
+      });
+      return orderItemRejHistoryModal.present();
     },
-    getCurrentOrderPart() {
-      if (this.order.parts) {
-        return this.order.parts.find((part) => part.orderPartSeqId === this.$route.params.orderPartSeqId)
-      }
-      return {}
+    async openReportAnIssueModal(item: any){
+      const reportAnIssueModal = await modalController.create({
+        component: ReportAnIssueModal,
+        componentProps: { item }
+      });
+      return reportAnIssueModal.present();
     },
-    async getCustomerContactDetails() {
-      try {
-        const resp = await OrderService.getCustomerContactDetails(this.$route.params.orderId)
-        if (!hasError(resp)) {
-          this.customerEmail = resp.data.orderContacts.email.email
-        }
-      } catch (error) {
-        console.error(error)
-      }
+    async readyForPickup (orderInfo: any) {
+      if(this.configurePicker) return this.assignPicker(orderInfo.order, orderInfo.part, this.currentFacility.facilityId);
+      const pickup = orderInfo.part?.shipmentMethodEnum?.shipmentMethodEnumId === 'STOREPICKUP';
+      const header = pickup ? this.$t('Ready for pickup') : this.$t('Ready to ship');
+      const message = pickup ? this.$t('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: orderInfo.order.customer.name, space: '<br/><br/>'}) : '';
+
+      const alert = await alertController
+        .create({
+          header: header,
+          message: message,
+          buttons: [{
+            text: this.$t('Cancel'),
+            role: 'cancel'
+          },{
+            text: header,
+            handler: async () => {
+              await this.store.dispatch('order/packShipGroupItems', { order: orderInfo.order, part: orderInfo.part, facilityId: this.currentFacility.facilityId})
+            }
+          }]
+        });
+      return alert.present();
+    },
+    async fetchRejectReasons() {
+      await this.store.dispatch('util/fetchRejectReasons');
     }
    },
   async mounted() {
     await this.getOrderDetail(this.$route.params.orderId, this.$route.params.orderPartSeqId);
-    await this.getCustomerContactDetails()
+    await this.fetchRejectReasons();
+    emitter.on('updateOrder', this.updateOrder);
+    emitter.on('readyForPickupOfOrderDetail', this.readyForPickup);
+  },
+  unmounted() {
+    emitter.off('updateOrder', this.updateOrder);
+    emitter.off('readyForPickupOfOrderDetail', this.readyForPickup);
   },
   setup () {
     const store = useStore();
@@ -198,26 +229,29 @@ export default defineComponent({
 
     return {
       Actions,
-      callOutline,
-      copyToClipboard,
+      bagHandleOutline,
+      bagRemoveOutline,
       hasPermission,
-      mailOutline,
       router,
       store,
-      swapVerticalOutline,
-      sendOutline
+      timeOutline
     };
   }
 });
 </script>
 
 <style scoped>
-main {
-  max-width: 445px;
-  margin: var(--spacer-base) auto 0; 
-}
+//.border-top {
+//  border-top: 1px solid #ccc;
+//}
 
-.border-top {
-  border-top: 1px solid #ccc;
+@media (min-width: 768px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-base);
+    margin-top: var(--spacer-lg);
+  }
 }
+
 </style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 9faa9f047..eaa129705 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -194,6 +194,21 @@
             <ion-toggle :checked="configurePicker" @ionChange="setConfigurePickerPreference($event)" slot="end" />
           </ion-item>
         </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>
+              {{ $t("Partial Order rejection") }}
+            </ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            {{ $t('Specify whether you reject partial BOPIS order when any order item’s inventory is insufficient at the store.') }}
+          </ion-card-content>
+          <ion-item lines="none">
+            <ion-label>{{ $t("Allow partial rejection") }}</ion-label>
+            <ion-toggle :checked="partialOrderRejection" @ionChange="setPartialOrderRejectionPreference($event)" slot="end" />
+          </ion-item>
+        </ion-card>
       </section>
     </ion-content>
   </ion-page>
@@ -262,6 +277,7 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
       instanceUrl: 'user/getInstanceUrl',
       configurePicker: "user/configurePicker",
+      partialOrderRejection: 'user/partialOrderRejection',
       showShippingOrders: 'user/showShippingOrders',
       showPackingSlip: 'user/showPackingSlip',
       locale: 'user/getLocale'
@@ -304,6 +320,9 @@ export default defineComponent({
     goToLaunchpad() {
       window.location.href = `${process.env.VUE_APP_LOGIN_URL}`
     },
+    setPartialOrderRejectionPreference (ev: any) {
+      this.store.dispatch('user/setUserPreference', { partialOrderRejection: ev.detail.checked })
+    },
     setShowShippingOrdersPreference (ev: any) {
       this.store.dispatch('user/setUserPreference', { showShippingOrders: ev.detail.checked })
     },
diff --git a/vue.config.js b/vue.config.js
index aec5bde1e..2c314c4aa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 require("@hotwax/app-version-info")
 module.exports = {
   pluginOptions: {
@@ -12,5 +14,13 @@ module.exports = {
       enableInSFC: true
     }
   },
-  runtimeCompiler: true
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue: path.resolve('./node_modules/vue')
+      }
+    }
+  },
+  runtimeCompiler: true,
+  transpileDependencies: ['@hotwax/dxp-components']
 }