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

src/locales/en.json

@@ -63,15 +63,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,6 +84,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 +101,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",

src/locales/es.json

@@ -62,15 +62,19 @@
   "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 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": "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 +83,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 +100,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",

src/locales/ja.json

@@ -62,15 +62,19 @@
   "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 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": "注文された商品の受取準備完了とマークされ、Eメールによる通知がお客様に送信されました。",
   "Order marked as ready for pickup but something went wrong while sending the email notification": "注文された商品の受取準備完了とマークされましたが、Eメールによる通知の送信中に何かしらの問題が発生しました。",
   "Order not found": "注文が見つかりません",
@@ -79,6 +83,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 +100,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": "設定",