Improved: UI for order details page(#283)

src/components/NotificationPreferenceModal.vue

@@ -162,16 +162,16 @@ export default defineComponent({
       )
     },
     async confirmSave() {
-      const message = this.translate("Are you sure you want to update the notification preferences?");
+      const message = translate("Are you sure you want to update the notification preferences?");
       const alert = await alertController.create({
-        header: this.translate("Update notification preferences"),
+        header: translate("Update notification preferences"),
         message,
         buttons: [
           {
-            text: this.translate("Cancel"),
+            text: translate("Cancel"),
           },
           {
-            text: this.translate("Confirm"),
+            text: translate("Confirm"),
             handler: async () => {
               await this.updateNotificationPref();
               modalController.dismiss({ dismissed: true });

src/components/OrderItemRejHistoryModal.vue

@@ -0,0 +1,113 @@
+<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("Order item rejection history") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="(item, index) in orderRejectionHistory" :key="index">
+        <ion-thumbnail slot="start">
+          <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small" />
+        </ion-thumbnail>
+        <ion-label>
+          <h5>{{ getProduct(item.productId).brandName }}</h5>
+          <h2>{{ getProduct(item.productId).productName }}</h2>
+          <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/')">{{ translate("Color") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/COLOR/') }}</p>
+          <p v-if="$filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/')">{{ translate("Size") }}: {{ $filters.getFeature(getProduct(item.productId).featureHierarchy, '1/SIZE/') }}</p>
+        </ion-label>
+        <ion-label slot="end" class="ion-text-right">
+          <h2>{{ getRejectReasonDescription(item.changeReasonEnumId) }}</h2>
+          <p>{{ item.changeUserLogin }}</p>
+          <p>{{ getTime(item.changeDatetime) }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+
+    <!-- Empty state -->
+    <div v-if="!orderRejectionHistory.length && !isLoading" class="empty-state">
+      <p>{{ translate('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';
+import { translate } from '@hotwax/dxp-components';
+
+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',
+      orderRejectionHistory: 'order/getOrderItemRejectionHistory'
+    })
+  },
+  async mounted() {
+    await this.store.dispatch('order/getOrderItemRejectionHistory', { 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 time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : ''
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      store,
+      translate
+    };
+  },
+});
+</script>

src/components/ProductListItem.vue

@@ -13,7 +13,7 @@
     </ion-label>
     <!-- Only show stock if its not a ship to store order -->
     <div v-if="!isShipToStoreOrder">
-      <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal >= 0">
+      <ion-note v-if="getProductStock(item.productId).quantityOnHandTotal >= 0" :color="updateColor(getProductStock(item.productId).quantityOnHandTotal)">
         {{ getProductStock(item.productId).quantityOnHandTotal }} {{ translate('pieces in stock') }}
       </ion-note>
       <ion-spinner v-else-if="isFetchingStock" color="medium" name="crescent" />
@@ -26,15 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import {
-  IonButton,
-  IonIcon,
-  IonItem,
-  IonLabel,
-  IonNote,
-  IonSpinner,
-  IonThumbnail
-} from "@ionic/vue";
+import { IonButton, IonIcon, IonItem, IonLabel, IonNote, IonSpinner, IonThumbnail } from "@ionic/vue";
 import { mapGetters, useStore } from 'vuex';
 import { ShopifyImg, translate } from '@hotwax/dxp-components'
 import { cubeOutline } from 'ionicons/icons'
@@ -75,6 +67,9 @@ export default defineComponent({
       this.isFetchingStock = true
       await this.store.dispatch('stock/fetchStock', { productId })
       this.isFetchingStock = false
+    },
+    updateColor(stock: number) {
+      return stock ? stock < 10 ? 'warning' : 'success' : 'danger';
     }
   },
   setup() {

src/components/RejectOrderModal.vue

@@ -0,0 +1,129 @@
+<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("Reject Order") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-item lines="none">
+      <p>{{ translate('On rejecting this order, will be sent an email with alternate fulfilment options and this order will be removed from your dashboard.', { customerName: order?.customer?.name }) }}</p>
+    </ion-item>
+    <ion-list>
+      <ion-list-header>{{ translate("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>{{ translate(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,
+  IonRadio,
+  IonRadioGroup,
+  alertController,
+  modalController,
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline, saveOutline } from 'ionicons/icons';
+import { mapGetters, useStore } from 'vuex'
+import { translate } from '@hotwax/dxp-components';
+
+export default defineComponent({
+  name: "RejectOrderModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonTitle,
+    IonToolbar,
+    IonRadio,
+    IonRadioGroup
+  },
+  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: translate('Reject Order'),
+          message: translate(`This order will be removed from your dashboard. This action cannot be undone.`, { space: '<br /><br />' }),
+          buttons: [{
+            text: translate('Cancel'),
+            role: 'cancel'
+          }, {
+            text: translate('Reject'),
+            handler: () => {
+              const part = { ...this.order.part, items: this.order.part.items.map((item: any) => ({ ...item, reason: this.rejectReasonId })) };
+              this.store.dispatch('order/setUnfillableOrderOrItem', { orderId: this.order.orderId, part }).then((resp) => {
+                if (resp) {
+                  // Mark current order as rejected
+                  this.store.dispatch('order/updateCurrent', { order: { ...this.order, rejected: true } })
+                }
+                this.closeModal();
+              })
+            },
+          }]
+        });
+      return alert.present();
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      closeOutline,
+      saveOutline,
+      store,
+      translate
+    };
+  }
+});
+</script>