Order detail refactor

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/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>
+

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>

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,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>