Improved: added support to mobile view of the completed page (#244)

src/locales/en.json

@@ -373,6 +373,7 @@
   "POS Channel": "POS Channel",
   "Price": "Price",
   "Primary": "Primary",  
+  "Print customer letter": "Print customer letter",
   "Print Customer Letter": "Print Customer Letter",
   "Print Picklist": "Print Picklist",
   "Print Picksheet": "Print Picksheet",
@@ -408,6 +409,7 @@
   "Rejection reasons": "Rejection reasons",
   "Rejection reasons order has been change. Click save button to update them.": "Rejection reasons order has been change. Click save button to update them.",
   "Rejection reason name is required.": "Rejection reason name is required.",
+  "Regenerate shipping label": "Regenerate shipping label",
   "Regenerate Shipping Label": "Regenerate Shipping Label",
   "Remove from carrier": "Remove from carrier",
   "Remove reason": "Remove reason",

src/views/Completed.vue

@@ -122,8 +122,9 @@
             <!-- TODO: implement functionality to mobile view -->
             <div class="mobile-only">
               <ion-item>
-                <ion-button :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo || ((isTrackingRequiredForAnyShipmentPackage(order) && !order.trackingCode) && !hasPermission(Actions.APP_FORCE_SHIP_ORDER))" fill="clear" >{{ translate("Ship Now") }}</ion-button>
-                <ion-button slot="end" fill="clear" color="medium" @click.stop="shippingPopover">
+                <ion-button v-if="!hasPackedShipments(order)" :disabled="true">{{ translate("Shipped") }}</ion-button>
+                <ion-button v-else :disabled="order.hasMissingShipmentInfo || order.hasMissingPackageInfo || ((isTrackingRequiredForAnyShipmentPackage(order) && !order.trackingCode) && !hasPermission(Actions.APP_FORCE_SHIP_ORDER))" fill="clear" @click.stop="shipOrder(order)">{{ translate("Ship Now") }}</ion-button>
+                <ion-button slot="end" fill="clear" color="medium" @click.stop="shippingPopover($event, order)">
                   <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
                 </ion-button>
               </ion-item>
@@ -198,7 +199,7 @@ import {
 } from '@ionic/vue';
 import { computed, defineComponent } from 'vue';
 import { caretDownOutline, cubeOutline, printOutline, downloadOutline, listOutline, 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'
@@ -456,13 +457,30 @@ 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) => {
+        if(result.data?.dismissed) {
+          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();
     },
 

src/views/ShippingPopover.vue

@@ -1,17 +1,16 @@
 <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 v-if="order.missingLabelImage" @click="closeModal('showShippingLabelErrorModal')">
+        {{ translate("Shipping label error") }}
+      </ion-item>
+      <ion-item button lines="none" :disabled="!hasPermission(Actions.APP_UNPACK_ORDER) || order.hasMissingShipmentInfo || order.hasMissingPackageInfo || !hasPackedShipments" @click="closeModal('unpackOrder')">
         {{ translate("Unpack") }}
       </ion-item>
     </ion-list>
@@ -21,26 +20,32 @@
 <script lang="ts">
 import {
   IonContent,
-  IonIcon,
   IonItem,
-  IonList
+  IonList,
+  popoverController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { printOutline, lockOpenOutline } from 'ionicons/icons'
 import { translate } from "@hotwax/dxp-components";
+import { Actions, hasPermission } from '@/authorization'
 
 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({ dismissed: true, selectedMethod })
+    }
+  },
   setup() {
     return {
-      printOutline,
-      lockOpenOutline,
+      Actions,
+      hasPermission,
       translate 
     }
   }