Improved: Order detail page on the open tab (#283)

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,

src/components/OrderItemRejHistoryModal.vue

@@ -0,0 +1,111 @@
+<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="(history, index) in rejectionHistory" :key="index">
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ShopifyImg :src="getProduct(history.productId).mainImageUrl" size="small" />
+        </ion-thumbnail>
+        <ion-label>
+          <h5>{{ getProduct(history.productId).brandName }}</h5>
+          <h2>{{ getProduct(history.productId).productName }}</h2>
+          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/')">{{ $t("Color") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/COLOR/') }}</p>
+          <p v-if="$filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/')">{{ $t("Size") }}: {{ $filters.getFeature(getProduct(history.productId).featureHierarchy, '1/SIZE/') }}</p>
+        </ion-label>
+        <ion-label slot="end" class="ion-text-right">
+          <h2>{{ getRejectReasonDescription(history?.changeReasonEnumId) }}</h2>
+          <p>{{ history?.changeUserLogin }}</p>
+          <p>{{ getTime(history.changeDatetime) }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+
+    <!-- Empty state -->
+    <div v-if="!rejectionHistory.length && !isLoading" 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";
+import { DateTime } from 'luxon';
+
+export default defineComponent({
+  name: "OrderItemRejHistoryModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonThumbnail,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  },
+  data () {
+    return {
+      isLoading: true
+    }
+  },
+  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, rejectReasonEnumIds: this.rejectReasons.reduce((enumIds: [], reason: any) => [...enumIds, reason.enumId], []) });
+    this.isLoading = false;
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    getRejectReasonDescription(rejectReasonEnumId: string) {
+      return this.rejectReasons.find((reason: any) => reason.enumId === rejectReasonEnumId)?.description;
+    },
+    getTime(time: number) {
+      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED)
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      store
+    };
+  },
+});
+</script>

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>

src/components/ReportAnIssueModal.vue

@@ -0,0 +1,133 @@
+<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 unfillableReasons" :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 {
+  alertController,
+  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 {
+      unfillableReasons: JSON.parse(process.env.VUE_APP_UNFILLABLE_REASONS),
+      rejectReasonId: ''
+    }
+  },
+  computed: {
+    ...mapGetters({
+      order: "order/getCurrent",
+      getProduct: 'product/getProduct',
+    })
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+    async confirmSave () {
+      const alert = await alertController
+        .create({
+          header: this.$t('Reject Order Item'),
+          // TODO: Show primary identifier in message instead of productName when product identifier functionality implemented in the app.
+          message: this.$t('will be removed from your dashboard. This action cannot be undone.', { productName: this.getProduct(this.item.productId)?.productName, space: '<br /><br />' }),
+          buttons: [{
+            text: this.$t('Cancel'),
+            role: 'cancel'
+          }, {
+            text: this.$t('Reject'),
+            handler: () => {
+              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();
+              })
+            },
+          }]
+        });
+      return alert.present();
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      saveOutline,
+      store
+    };
+  }
+});
+</script>

src/locales/en.json

@@ -1,6 +1,7 @@
 { 
   "App": "App",
   "All items were canceled from the order": "All items were canceled from the order",
+  "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.",
   "Are you sure you want to change the time zone to?": "Are you sure you want to change the time zone to?",
@@ -63,15 +64,19 @@
   "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 to handover.": "Order is now ready to handover.",
+  "Order has been rejected.": "Order has been rejected.",
   "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,10 +85,12 @@
   "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",
   "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",
   "pending approval": "pending approval",
   "Picked by": "Picked by { pickers }",
@@ -95,13 +102,17 @@
   "Ready for pickup": "Ready for pickup",
   "Ready to create an app?": "Ready to create an app?",
   "Ready to ship": "Ready to ship",
+  "Reject": "Reject",
   "Reject Order": "Reject Order",
+  "Reject Order Item": "Reject Order Item",
   "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",
@@ -124,6 +135,7 @@
   "Something went wrong while login. Please contact administrator": "Something went wrong while login. Please contact administrator.",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.": "Specify which facility you want to operate from. Order, inventory and other configuration data will be specific to the facility you select.",
+  "Specify whether you reject partial BOPIS order when any order item’s inventory is insufficient at the store.": "Specify whether you reject partial BOPIS order when any order item’s inventory is insufficient at the store.",
   "State": "State",
   "Staff": "Staff",
   "Street": "Street",
@@ -138,10 +150,10 @@
   "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.",
   "Unfillable Items": "Unfillable Items",
-  "Update Order": "Update Order",
   "Update time zone": "Update time zone",
   "Username": "Username",
   "Warehouse": "Warehouse",
+  "will be removed from your dashboard. This action cannot be undone.": "{ productName } will be removed from your dashboard.{ space } This action cannot be undone.",
   "Worn Display": "Worn Display",
   "This order will be removed from your dashboard. This action cannot be undone.": "This order will be removed from your dashboard.{ space } This action cannot be undone.",
   "View shipping orders along with pickup orders.": "View shipping orders along with pickup orders.",