Implemented: added the functionality to the popover buttons in the mobile view of completed orders page (#244)

src/locales/en.json

@@ -182,7 +182,7 @@
   "Please provide unique labels": "Please provide unique labels",
   "Please select at least one field to generate CSV": "Please select at least one field to generate CSV",
   "Please upload a valid csv to continue": "Please upload a valid csv to continue",
-  "Print Customer Letter": "Print Customer Letter",
+  "Print customer letter": "Print customer letter",
   "Print Picklist": "Print Picklist",
   "Print Picksheet": "Print Picksheet",
   "Print supplementary documents with the shipment for package identification.": "Print supplementary documents with the shipment for package identification.",
@@ -201,7 +201,7 @@
   "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.",
-  "Regenerate Shipping Label": "Regenerate Shipping Label",
+  "Regenerate shipping label": "Regenerate shipping label",
   "Replace": "Replace",
   "Replace pickers": "Replace pickers",
   "Replace current pickers with new selection?": "Replace current pickers with new selection?",

src/locales/es.json

@@ -182,7 +182,7 @@
   "Please provide unique labels": "Por favor, proporciona etiquetas únicas",
   "Please select at least one field to generate CSV": "Por favor, selecciona al menos un campo para generar el archivo CSV",
   "Please upload a valid csv to continue": "Por favor, carga un archivo CSV válido para continuar",
-  "Print Customer Letter": "Imprimir Carta al Cliente",
+  "Print customer letter": "Print customer letter",
   "Print Picklist": "Imprimir Lista de Selección",
   "Print Picksheet": "Imprimir Hoja de Selección",
   "Print Shipping Label": "Imprimir Etiqueta de Envío",
@@ -202,7 +202,7 @@
   "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.",
-  "Regenerate Shipping Label": "Regenerate Shipping Label",
+  "Regenerate shipping label": "Regenerate shipping label",
   "Replace": "Replace",
   "Replace pickers": "Replace pickers",
   "Replace current pickers with new selection?": "Replace current pickers with new selection?",

src/views/Completed.vue

@@ -90,11 +90,11 @@
               </div>
             </div>
 
-            <!-- TODO: implement functionality to mobile view -->
             <div class="mobile-only">
               <ion-item>
-                <ion-button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" fill="clear" >{{ translate("Ship Now") }}</ion-button>
-                <ion-button slot="end" fill="clear" color="medium" @click="shippingPopover">
+                <ion-button v-if="!hasPackedShipments(order)" :disabled="true" fill="clear">{{ translate("Shipped") }}</ion-button>
+                <ion-button v-else :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" fill="clear" @click="shipOrder(order)">{{ translate("Ship Now") }}</ion-button>
+                <ion-button slot="end" fill="clear" color="medium" @click="shippingPopover($event, order)">
                   <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
                 </ion-button>
               </ion-item>
@@ -104,13 +104,13 @@
             <div class="actions">
               <div class="desktop-only">
                 <ion-button v-if="!hasPackedShipments(order)" :disabled="true">{{ translate("Shipped") }}</ion-button>
-                <ion-button  :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="shipOrder(order)" v-else>{{ translate("Ship Now") }}</ion-button>
+                <ion-button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="shipOrder(order)" v-else>{{ translate("Ship Now") }}</ion-button>
                 <ion-button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" fill="outline" @click="regenerateShippingLabel(order)">
-                  {{ translate("Regenerate Shipping Label") }}
+                  {{ translate("Regenerate shipping label") }}
                   <ion-spinner color="primary" slot="end" v-if="order.isGeneratingShippingLabel" name="crescent" />
                 </ion-button>
                 <ion-button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" fill="outline" @click="printPackingSlip(order)">
-                  {{ translate("Print Customer Letter") }}
+                  {{ translate("Print customer letter") }}
                   <ion-spinner color="primary" slot="end" v-if="order.isGeneratingPackingSlip" name="crescent" />
                 </ion-button>
               </div>
@@ -168,7 +168,7 @@ import {
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { cubeOutline, printOutline, downloadOutline, pricetagOutline, ellipsisVerticalOutline, checkmarkDoneOutline, optionsOutline } from 'ionicons/icons'
-import Popover from '@/views/ShippingPopover.vue'
+import ShippingPopover from '@/views/ShippingPopover.vue'
 import { useRouter } from 'vue-router';
 import { mapGetters, useStore } from 'vuex'
 import { copyToClipboard, formatUtcDate, getFeature, showToast } from '@/utils'
@@ -376,16 +376,29 @@ export default defineComponent({
       return shipOrderAlert.present();
     },
 
-    async shippingPopover(ev: Event) {
+    async shippingPopover(ev: Event, order:any) {
       const popover = await popoverController.create({
-        component: Popover,
+        component: ShippingPopover,
+        componentProps: {
+          hasPackedShipments: this.hasPackedShipments(order),
+          order
+        },
         event: ev,
         translucent: true,
         showBackdrop: false,
       });
+
+      popover.onDidDismiss().then(async(result) => {
+        const selectedMethod = result.data?.selectedMethod
+
+        // Retrieved the method name on popover dismissal and respective method is called.
+        if(typeof(this[selectedMethod]) === 'function') {
+          await (this as any)[selectedMethod](order);
+        }
+      })
+
       return popover.present();
     },
-
     async fetchShipmentMethods() {
       const payload = prepareOrderQuery({
         viewSize: "0",  // passing viewSize as 0, as we don't want to fetch any data

src/views/ShippingPopover.vue

@@ -1,46 +1,56 @@
 <template>
   <ion-content>
     <ion-list>
-      <!-- TODO: Need to give Shipping Label Error Option -->
-      <ion-item button>
-        <ion-icon slot="start" :icon="printOutline" />
-        {{ translate("Shipping label") }}
+      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="closeModal('regenerateShippingLabel')">
+        {{ translate("Regenerate shipping label") }}
       </ion-item>
-      <ion-item button>
-        <ion-icon slot="start" :icon="printOutline" />
-        {{ translate("Customer letter") }}
+      <ion-item button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo" @click="closeModal('printPackingSlip')">
+        {{ translate("Print customer letter") }}
       </ion-item>
-      <ion-item button lines="none">
-        <ion-icon slot="start" :icon="lockOpenOutline" />
+      <ion-item button :disabled="!hasPermission(Actions.APP_UNPACK_ORDER) || order.hasMissingShipmentInfo || order.hasMissingPackageInfo || !hasPackedShipments" @click="closeModal('unpackOrder')">
         {{ translate("Unpack") }}
       </ion-item>
+      <ion-item button :disabled="!order.missingLabelImage" lines="none" @click="closeModal('showShippingLabelErrorModal')">
+        {{ translate("Shipping label error") }}
+      </ion-item>
     </ion-list>
   </ion-content>
 </template>
 
 <script lang="ts">
 import {
   IonContent,
-  IonIcon,
   IonItem,
   IonList
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { printOutline, lockOpenOutline } from 'ionicons/icons'
+import { lockOpenOutline, printOutline, receiptOutline, warningOutline } from 'ionicons/icons'
+import { Actions, hasPermission } from '@/authorization'
+import { popoverController } from "@ionic/core";
 import { translate } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "ShippingPopover",
   components: { 
     IonContent,
-    IonIcon,
     IonItem,
     IonList,
   },
+  props: ['hasPackedShipments', 'order'],
+  methods: {
+    closeModal(selectedMethod: string) {
+      // Sending function name to be called after popover dismiss.
+      popoverController.dismiss({selectedMethod})
+    }
+  },
   setup() {
     return {
-      printOutline,
+      Actions,
+      hasPermission,
       lockOpenOutline,
+      printOutline,
+      receiptOutline,
+      warningOutline,
       translate 
     }
   }