Merge pull request #357 from k2maan/fulfilment-pwa/#355

Implemented: support to generate QR code to open picklist details directly through picking app (#355)

.env.example

@@ -10,4 +10,5 @@ VUE_APP_MAPPING_IMPORD={"orderId": { "label": "Order ID", "value": "" }, "facili
 VUE_APP_MAPPING_EXPORD={"shipment-id": { "label": "Shipment ID", "value": "" }, "order-id": { "label": "Order ID", "value": "" },"to-name": { "label": "To Name", "value": "" },"address1": { "label": "Address 1", "value": "" },"address2": { "label": "Address 2", "value": "" },"city": { "label": "City", "value": "" },"state": { "label": "State", "value": "" },"zip-code": { "label": "Zip Code", "value": "" },"country-code": { "label": "Country Code", "value": "" },"full-to-address": { "label": "Full Address", "value": "" },"phone-number": { "label": "Phone Number", "value": "" },"email-address": { "label": "Email", "value": "" },"weight": { "label": "Weight", "value": "" },"quantity": { "label": "Quantity", "value": "" },"product-name": { "label": "Product Name", "value": "" },"product-sku": { "label": "Product Sku", "value": "" },"shipping-method": { "label": "Shipping Method", "value": "" },"facility-name": { "label": "Facility Name", "value": "" },"facility-address1": { "label": "Facility Address 1", "value": "" },"facility-address2": { "label": "Facility Address 2", "value": "" },"facility-city": { "label": "Facility City", "value": "" },"facility-state": { "label": "Facility State", "value": "" },"facility-zip-code": { "label": "Facility Zip Code", "value": "" },"facility-phone": { "label": "Facility Phone", "value": "" },"facility-full-address": { "label": "Facility Full Address", "value": "" }}
 VUE_APP_LOCALES={"en-US": "English", "es-ES": "Español"}
 VUE_APP_DEFAULT_LOG_LEVEL="error"
-VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
+VUE_APP_LOGIN_URL="http://launchpad.hotwax.io/login"
+VUE_APP_PICKING_LOGIN_URL="https://picking.hotwax.io/login"

package.json

@@ -15,7 +15,7 @@
     "@capacitor/core": "^2.4.7",
     "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
-    "@hotwax/dxp-components": "^1.9.1",
+    "@hotwax/dxp-components": "^1.11.0",
     "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
@@ -27,6 +27,7 @@
     "file-saver": "^2.0.5",
     "luxon": "^2.4.0",
     "mitt": "^2.1.0",
+    "qrcode.vue": "^3.4.1",
     "register-service-worker": "^1.7.1",
     "vue": "3.2.26",
     "vue-logger-plugin": "^2.2.3",

src/components/QRCodeModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <ion-header :translucent="true">
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon :icon="closeOutline" slot="icon-only" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ picklistId }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <!-- size is given in px, render-as=svg for better quality -->
+    <qrcode-vue class="center" render-as="svg" :size='400' :value="link" />
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline } from 'ionicons/icons';
+import QrcodeVue from 'qrcode.vue'
+
+export default defineComponent({
+  name: 'QRCodeModal',
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonTitle,
+    IonToolbar,
+    QrcodeVue
+  },
+  props: ["picklistId", "link"],
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    },
+  },
+  setup() {
+    return {
+      closeOutline
+    }
+  },
+});
+</script>
+
+<style>
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

src/locales/en.json

@@ -20,6 +20,7 @@
   "Are you sure you want to reject in progress order(s)?": "Are you sure you want to reject { ordersCount } in progress order(s)?",
   "Are you sure you want to update box selection?": "Are you sure you want to update box selection?",
   "Assign Pickers": "Assign Pickers",
+  "Back to Launchpad": "Back to Launchpad",
   "Box added successfully": "Box added successfully",
   "Boxes": "Boxes",
   "Cancel": "Cancel",
@@ -58,6 +59,8 @@
   "Enter key": "Enter key",
   "Enter mapping name": "Enter mapping name",
   "Enter value": "Enter value",
+  "Error getting preferred product store.": "Error getting preferred product store.",
+  "Error getting user profile.": "Error getting user profile.",
   "EXIM": "EXIM",
   "Export": "Export",
   "Export Orders": "Export Orders",
@@ -98,6 +101,7 @@
   "Full Address": "Full Address",
   "Fulfillment capacity": "Fulfillment capacity",
   "Generate packing slip": "Generate packing slip",
+  "Generate QR code": "Generate QR code",
   "Generate shipping label": "Generate shipping label",
   "Go to OMS": "Go to OMS",
   "Go to Launchpad": "Go to Launchpad",
@@ -118,6 +122,7 @@
   "Last brokered": "Last brokered",
   "Loading": "Loading",
   "Login": "Login",
+  "Login failed": "Login failed",
   "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Logout": "Logout",
@@ -202,6 +207,7 @@
   "Product Store": "Product Store",
   "Provide a value greater than 0": "Provide a value greater than 0",
   "Quantity": "Quantity",
+  "Reason:": "Reason:",
   "Ready to pack": "Ready to pack",
   "Reject": "Reject",
   "Reject all": "Reject all",
@@ -261,6 +267,7 @@
   "Shipping labels": "Shipping labels",
   "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.",
   "Something went wrong, could not fetch order details.": "Something went wrong, could not fetch order details.",
   "Something went wrong, could not edit picker(s)": "Something went wrong, could not edit picker(s)",
   "Something went wrong while login. Please contact administrator.": "Something went wrong while login. Please contact administrator.",
@@ -305,6 +312,8 @@
   "Update mapping": "Update mapping",
   "Update time zone": "Update time zone",
   "Upload": "Upload",
+  "User is not associated with any facilities.": "User is not associated with any facilities.",
+  "User is not associated with any product stores.": "User is not associated with any product stores.",
   "Username": "Username",
   "Value": "Value",
   "View details": "View details",

src/locales/es.json

@@ -20,6 +20,7 @@
   "Are you sure you want to reject in progress order(s)?": "¿Estás seguro/a de que quieres rechazar { ordersCount } pedido(s) en curso?",
   "Are you sure you want to update box selection?": "Are you sure you want to update box selection?",
   "Assign Pickers": "Asignar Recolectores",
+  "Back to Launchpad": "Back to Launchpad",
   "Box added successfully": "Caja agregada exitosamente",
   "Boxes": "Cajas",
   "Cancel": "Cancelar",
@@ -58,6 +59,8 @@
   "Enter key": "Ingresar clave",
   "Enter mapping name": "Insertar nombre de mapeo",
   "Enter value": "Ingresar valor",
+  "Error getting preferred product store.": "Error getting preferred product store.",
+  "Error getting user profile.": "Error getting user profile.",
   "EXIM": "Inicio",
   "Export": "Exportar",
   "Export Orders": "Exportar Ordenes",
@@ -98,6 +101,7 @@
   "Full Address": "Dirección Completa",
   "Fulfillment capacity": "Capacidad de cumplimiento",
   "Generate packing slip": "Generar documento de embalaje",
+  "Generate QR code": "Generate QR code",
   "Generate shipping label": "Generar etiqueta de envío",
   "Go to OMS": "Ir a OMS",
   "Go to Launchpad": "Ir a Launchpad",
@@ -118,6 +122,7 @@
   "Last brokered": "Última intermediación",
   "Loading": "Cargando",
   "Login": "Iniciar Sesión",
+  "Login failed": "Login failed",
   "Logging in": "Iniciando sesión",
   "Logging out": "Cerrando sesión",
   "Logout": "Cerrar Sesión",
@@ -202,6 +207,7 @@
   "Product Store": "Tienda de productos",
   "Provide a value greater than 0": "Proporciona un valor mayor a 0",
   "Quantity": "Cantidad",
+  "Reason:": "Reason:",
   "Ready to pack": "Listo para empacar",
   "Reject": "Rechazar",
   "Reject all": "Rechazar todo",
@@ -261,6 +267,7 @@
   "Shipping labels": "Etiquetas de Envío",
   "Some of the mapping fields are missing in the CSV: ": "Algunos de los campos de mapeo faltan en el CSV: {missingFields}",
   "Something went wrong": "Algo salió mal",
+  "Something went wrong while getting complete user permissions.": "Something went wrong while getting complete user permissions.",
   "Something went wrong, could not fetch order details.": "Something went wrong, could not fetch order details.",
   "Something went wrong, could not edit picker(s)": "Algo salió mal, no se pudieron editar los selectores",
   "Something went wrong while login. Please contact administrator.": "Algo salió mal al iniciar sesión. Por favor contacte al administrador.",
@@ -305,6 +312,8 @@
   "Update mapping": "Mapeo Actualizado",
   "Update time zone": "Actualizar zona horaria",
   "Upload": "Cargar",
+  "User is not associated with any facilities.": "User is not associated with any facilities.",
+  "User is not associated with any product stores.": "User is not associated with any product stores.",
   "Username": "Nombre de Usuario",
   "Value": "Valor",
   "View details": "View details",

src/router/index.ts

@@ -21,7 +21,7 @@ declare module 'vue-router' {
   }
 }
 import SavedMappings from "@/views/SavedMappings.vue"
-import { useAuthStore, Login } from '@hotwax/dxp-components'
+import { useAuthStore, DxpLogin } from '@hotwax/dxp-components'
 import { loader } from '@/utils/user';
 
 const authGuard = async (to: any, from: any, next: any) => {
@@ -116,7 +116,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/login',
     name: 'Login',
-    component: Login,
+    component: DxpLogin,
     beforeEnter: loginGuard
   },
   {

src/views/InProgress.vue

@@ -186,6 +186,12 @@
     <!-- only show footer buttons if 'All orders' is not selected -->
     <ion-footer v-if="selectedPicklistId">
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button fill="clear" color="primary" @click="openQRCodeModal(selectedPicklistId)">
+            <ion-icon slot="start" :icon="qrCodeOutline" />
+            {{ translate("Generate QR code") }}
+          </ion-button>
+        </ion-buttons>
         <ion-buttons slot="end">
           <ion-button fill="outline" color="primary" @click="editPickers(getPicklist(selectedPicklistId))">
             <ion-icon slot="start" :icon="pencilOutline" />
@@ -246,9 +252,10 @@ import {
   cubeOutline,
   ellipsisVerticalOutline,
   pencilOutline,
+  optionsOutline,
   pricetagOutline,
   printOutline,
-  optionsOutline
+  qrCodeOutline
 } from 'ionicons/icons'
 import PackagingPopover from "@/views/PackagingPopover.vue";
 import { mapGetters, useStore } from 'vuex';
@@ -269,11 +276,12 @@ import EditPickersModal from '@/components/EditPickersModal.vue';
 import ShipmentBoxTypePopover from '@/components/ShipmentBoxTypePopover.vue'
 import OrderActionsPopover from '@/components/OrderActionsPopover.vue'
 import ShippingLabelErrorModal from '@/components/ShippingLabelErrorModal.vue'
+import QRCodeModal from '@/components/QRCodeModal.vue'
+import { useAuthStore } from '@hotwax/dxp-components'
 
 export default defineComponent({
   name: 'InProgress',
   components: {
-    ShopifyImg,
     IonButton,
     IonButtons,
     IonCard,
@@ -304,6 +312,7 @@ export default defineComponent({
     IonThumbnail,   
     IonTitle,
     IonToolbar,
+    ShopifyImg,
     ViewSizeSelector
   },
   computed: {
@@ -1020,7 +1029,15 @@ export default defineComponent({
         }
       });
       return shippingLabelErrorModal.present();
-    }
+    },
+    async openQRCodeModal(picklistId: string) {
+      const link = `${process.env.VUE_APP_PICKING_LOGIN_URL}?oms=${this.authStore.oms}&token=${this.authStore.token.value}&expirationTime=${this.authStore.token.expiration}&picklistId=${picklistId}`
+      const qrCodeModal = await modalController.create({
+        component: QRCodeModal,
+        componentProps: { picklistId, link }
+      });
+      return qrCodeModal.present();
+    },
   },
   async mounted () {
     this.store.dispatch('util/fetchRejectReasons')
@@ -1032,10 +1049,12 @@ export default defineComponent({
     emitter.off('updateOrderQuery', this.updateOrderQuery)
   },
   setup() {
+    const authStore = useAuthStore()
     const store = useStore();
 
     return {
       Actions,
+      authStore,
       caretDownOutline,
       copyToClipboard,
       cubeOutline,
@@ -1049,6 +1068,7 @@ export default defineComponent({
       hasPermission,
       checkmarkDoneOutline,
       pricetagOutline,
+      qrCodeOutline,
       store,
       translate
     }