Implemented: UI for rejection reason page (#423)

package.json

@@ -16,6 +16,7 @@
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/dxp-components": "^1.11.0",
+    "@hotwax/apps-theme": "^1.2.6",
     "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",

src/components/CreateRejectionReasonModal.vue

@@ -0,0 +1,108 @@
+<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("Create rejection reason") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <form>
+      <ion-list>
+        <ion-item>
+          <ion-label>{{ translate("Name") }}</ion-label>
+          <ion-input />
+        </ion-item>
+        <ion-item>
+          <ion-label>{{ translate("ID") }}</ion-label>
+          <ion-input />
+        </ion-item>
+        <ion-item>
+          <ion-label>{{ translate("Description") }}</ion-label>
+          <ion-input />
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-item>
+          <ion-label>{{ translate("Variance type") }}</ion-label>
+          <ion-select interface="popover" value="">
+            <ion-select-option value="">{{ "No variance" }}</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-item lines="none">
+          <ion-label>
+            <p>{{ "< Variance type desc >" }}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button>
+          <ion-icon :icon="checkmarkDoneOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </form>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { checkmarkDoneOutline, closeOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "CreateRejectionReasonModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonInput,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonSelect,
+    IonSelectOption,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss()
+    }
+  },
+  setup() {
+    return {
+      checkmarkDoneOutline,
+      closeOutline,
+      translate
+    };
+  },
+});
+</script>

src/components/Menu.vue

@@ -9,13 +9,19 @@
     <ion-content>
       <ion-list>
         <ion-menu-toggle auto-hide="false" v-for="(page, index) in getValidMenuItems(appPages)" :key="index">
+          <ion-item-divider color="light" v-if="!page.url">
+            <ion-label>
+              {{ translate(page.title) }}
+            </ion-label>
+          </ion-item-divider>
           <ion-item
+            v-else
             button
             router-direction="root"
             :router-link="page.url"
             class="hydrated"
             :class="{ selected: selectedIndex === index }">
-            <ion-icon slot="start" :ios="page.iosIcon" :md="page.mdIcon" />
+            <ion-icon v-if="page.mdIcon || page.iosIcon" slot="start" :ios="page.iosIcon" :md="page.mdIcon" />
             <ion-label>{{ translate(page.title) }}</ion-label>
           </ion-item>
         </ion-menu-toggle>
@@ -30,6 +36,7 @@ import {
   IonHeader,
   IonIcon,
   IonItem,
+  IonItemDivider,
   IonLabel,
   IonList,
   IonMenu,
@@ -52,6 +59,7 @@ export default defineComponent({
     IonHeader,
     IonIcon,
     IonItem,
+    IonItemDivider,
     IonLabel,
     IonList,
     IonMenu,
@@ -130,6 +138,14 @@ export default defineComponent({
         url: "/settings",
         iosIcon: settingsOutline,
         mdIcon: settingsOutline,
+      },
+      {
+        title: "Organization",
+        url: ""
+      }, {
+        title: "Rejection reasons",
+        url: "/rejection-reasons",
+        childRoutes: ["/rejection-reasons/"],
       }
     ];
 

src/components/RejectReasonActionsPopver.vue

@@ -0,0 +1,40 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>
+        {{ "<enumName>" }}
+      </ion-list-header>
+      <ion-item button>
+        {{ translate("Edit name and description") }}
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("Remove reason") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from '@hotwax/dxp-components'
+export default defineComponent({
+  name: "RejectReasonActionsPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  setup() {
+    return {
+      translate
+    }
+  },
+});
+</script> 

src/components/VarianceTypeActionsPopover.vue

@@ -0,0 +1,43 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>
+        {{ translate("Variance type") }}
+      </ion-list-header>
+      <ion-item button>
+        {{ translate("No variance") }}
+      </ion-item>
+      <ion-item button>
+        {{ translate("Single variance") }}
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("All variance") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from '@hotwax/dxp-components'
+export default defineComponent({
+  name: "RejectReasonActionsPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  setup() {
+    return {
+      translate
+    }
+  },
+});
+</script> 

src/locales/en.json

@@ -1,5 +1,6 @@
 {
   "All": "All",
+  "All variance": "All variance",
   "App": "App",
   "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.": "A store represents a company or a unique catalog of products. If your OMS is connected to multiple eCommerce stores selling different collections of products, you may have multiple Product Stores set up in HotWax Commerce.",
   "already shipped.": "{shippedQuantity} already shipped.",
@@ -46,6 +47,7 @@
   "Check stock": "Check stock",
   "Choose language": "Choose language",
   "City": "City",
+  "Create permission": "Create permission",
   "Credit Card": "Credit Card",
   "COD Fee": "COD Fee",
   "COD Fee Tax": "COD Fee Tax",
@@ -59,6 +61,7 @@
   "Copy ID": "Copy ID",
   "Country Code": "Country Code",
   "Create": "Create",
+  "Create rejection reason": "Create rejection reason",
   "Create shipment": "Create shipment",
   "CSV Mapping": "CSV Mapping",
   "Custom Label": "Custom Label",
@@ -70,6 +73,7 @@
   "Debit Card": "Debit Card",
   "Declined": "Declined",
   "Define custom label for": "Define custom label for {field}",
+  "Description": "Description",
   "Dismiss": "Dismiss",
   "Delete": "Delete",
   "Delete mapping": "Delete mapping",
@@ -82,6 +86,7 @@
   "Download": "Download",
   "eCom Store": "eCom Store",
   "ECom inventory status updated successfully": "ECom inventory status updated successfully",
+  "Edit name and description": "Edit name and description",
   "Edit packaging": "Edit packaging",
   "Edit pickers": "Edit pickers",
   "Edit Pickers": "Edit Pickers",
@@ -141,6 +146,7 @@
   "Ground": "Ground",
   "Handling Instructions": "Handling Instructions",
   "History": "History",
+  "ID": "ID",
   "is identified as unfulfillable. other containing this product will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable.  { space } { orders } other { orderText } containing this product will be unassigned from this store and sent to be rebrokered.",
   "is identified as unfulfillable. This order item will be unassigned from this store and sent to be rebrokered.": "{ productName } is identified as unfulfillable. { space } This order item will be unassigned from this store and sent to be rebrokered.",
   "is identified as. This order item will be unassigned from the store and sent to be rebrokered.": "{ productName } is identified as { rejectReason }. This order item will be unassigned from the store and sent to be rebrokered.",
@@ -172,6 +178,7 @@
   "Mapping name": "Mapping name",
   "Mismatch": "Mismatch",
   "Missing shipping label": "Missing shipping label",
+  "Name": "Name",
   "Next day": "Next day",
   "New mapping": "New mapping",
   "No data available": "No data available",
@@ -186,6 +193,7 @@
   "No results found for . Try searching In Progress or Open tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching In Progress or Open tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
   "No results found for . Try searching In Progress or Completed tab instead. If you still can't find what you're looking for, try switching stores.": "No results found for { searchedQuery }. Try searching In Progress or Completed tab instead.{ lineBreak } If you still can't find what you're looking for, try switching stores.",
   "No time zone found": "No time zone found",
+  "No variance": "No variance",
   "Not in Stock": "Not in Stock",
   "Not-Authorized": "Not-Authorized",
   "Not-Received": "Not-Received",
@@ -217,6 +225,7 @@
   "Order updated successfully": "Order updated successfully",
   "ordered": "ordered",
   "orders": "orders",
+  "Organization": "Organization",
   "Out of stock": "Out of stock",
   "out of cannot be shipped due to missing tracking codes.": "{remainingOrders} out of {totalOrders} cannot be shipped due to missing tracking codes.",
   "package": "package",
@@ -267,7 +276,9 @@
   "Reject order": "Reject order",
   "Rejecting has been started. All in progress orders will be rejected shortly.": "Rejecting has been started. All in progress orders will be rejected shortly.",
   "Rejecting has been started. All outstanding orders will be rejected shortly.": "Rejecting has been started. All outstanding orders will be rejected shortly.",
+  "Rejection reasons": "Rejection reasons",
   "Regenerate Shipping Label": "Regenerate Shipping Label",
+  "Remove reason": "Remove reason",
   "Replace": "Replace",
   "Replace pickers": "Replace pickers",
   "Replace current pickers with new selection?": "Replace current pickers with new selection?",
@@ -285,6 +296,7 @@
   "Scan items": "Scan items",
   "Search": "Search",
   "Search orders": "Search orders",
+  "Search rejection reasons": "Search rejection reasons",
   "Search time zones": "Search time zones",
   "Select": "Select",
   "Select all": "Select all",
@@ -324,6 +336,7 @@
   "Shipping Label generated successfully": "Shipping Label generated successfully",
   "Shipping labels": "Shipping labels",
   "Show label error": "Show label error",
+  "Single variance": "Single variance",
   "Some of the mapping fields are missing in the CSV: ": "Some of the mapping fields are missing in the CSV: {missingFields}",
   "Something went wrong": "Something went wrong",
   "Something went wrong while getting complete user permissions.": "Something went wrong while getting complete user permissions.",
@@ -381,6 +394,7 @@
   "User is not associated with any product stores.": "User is not associated with any product stores.",
   "Username": "Username",
   "Value": "Value",
+  "Variance type": "Variance type",
   "View details": "View details",
   "View Saved Mappings": "View Saved Mappings",
   "Weight": "Weight",