Merge pull request #257 from sanskar345/fulfillment-pwa/#254

Implemented: toast for Blocked Pop-Ups when Generating Order Documents (#254)

src/locales/en.json

@@ -248,6 +248,7 @@
   "Turn on fulfillment": "Turn on fulfillment",
   "Turn on fulfillment for ": "Turn on fulfillment for { facilityName }",
   "Turn off fulfillment for ": "Turn off fulfillment for { facilityName }",
+  "Unable to open as browser is blocking pop-ups.": "Unable to open { documentName } as browser is blocking pop-ups.",
   "Unpack": "Unpack",
   "Unpacking this order will send it back to 'In progress' and it will have to be repacked.": "Unpacking this order will send it back to 'In progress' and it will have to be repacked.",
   "Update": "Update",

src/locales/es.json

@@ -250,6 +250,7 @@
   "Turn on fulfillment": "Activar Cumplimiento",
   "Turn on fulfillment for ": "Activar cumplimiento para {facilityName}",
   "Turn off fulfillment for ": "Desactivar cumplimiento para {facilityName}",
+  "Unable to open as browser is blocking pop-ups.": "Unable to open { documentName } as browser is blocking pop-ups.",
   "Unpack": "Desempacar",
   "Unpacking this order will send it back to 'In progress' and it will have to be repacked.": "Desempacar este pedido lo enviará de vuelta a 'En curso' y tendrá que ser vuelto a empacar.",
   "Update": "Update",

src/services/OrderService.ts

@@ -3,6 +3,7 @@ import { translate } from '@/i18n';
 import logger from '@/logger';
 import { showToast } from '@/utils';
 import store from '@/store';
+import { cogOutline } from 'ionicons/icons';
 
 const findOpenOrders = async (query: any): Promise<any> => {
   return api({
@@ -191,7 +192,12 @@ const printPackingSlip = async (shipmentIds: Array<string>): Promise<any> => {
     // Generate local file URL for the blob received
     const pdfUrl = window.URL.createObjectURL(resp.data);
     // Open the file in new tab
-    (window as any).open(pdfUrl, "_blank").focus();
+    try {
+      (window as any).open(pdfUrl, "_blank").focus();
+    }
+    catch {
+      showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'packing slip'}), { icon: cogOutline });
+    }
 
   } catch (err) {
     showToast(translate('Failed to print packing slip'))
@@ -218,7 +224,12 @@ const printShippingLabel = async (shipmentIds: Array<string>): Promise<any> => {
     // Generate local file URL for the blob received
     const pdfUrl = window.URL.createObjectURL(resp.data);
     // Open the file in new tab
-    (window as any).open(pdfUrl, "_blank").focus();
+    try {
+      (window as any).open(pdfUrl, "_blank").focus();
+    }
+    catch {
+      showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'shipping label'}), { icon: cogOutline });
+    }
 
   } catch (err) {
     showToast(translate('Failed to print shipping label'))
@@ -246,7 +257,12 @@ const printShippingLabelAndPackingSlip = async (shipmentIds: Array<string>): Pro
     // Generate local file URL for the blob received
     const pdfUrl = window.URL.createObjectURL(resp.data);
     // Open the file in new tab
-    (window as any).open(pdfUrl, "_blank").focus();
+    try {
+      (window as any).open(pdfUrl, "_blank").focus();
+    }
+    catch {
+      showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'shipping label and packing slip'}), { icon: cogOutline });
+    }
 
   } catch (err) {
     showToast(translate('Failed to print shipping label and packing slip'))
@@ -272,8 +288,12 @@ const printPicklist = async (picklistId: string): Promise<any> => {
     // Generate local file URL for the blob received
     const pdfUrl = window.URL.createObjectURL(resp.data);
     // Open the file in new tab
-    (window as any).open(pdfUrl, "_blank").focus();
-
+    try {
+      (window as any).open(pdfUrl, "_blank").focus();
+    }
+    catch {
+      showToast(translate('Unable to open as browser is blocking pop-ups.', {documentName: 'picklist'}), { icon: cogOutline });
+    }
   } catch (err) {
     showToast(translate('Failed to print picklist'))
     logger.error("Failed to print picklist", err)

src/utils/index.ts

@@ -14,28 +14,30 @@ const hasError = (response: any) => {
   return typeof response.data != "object" || !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_ || !!response.data.error;
 }
 
-const showToast = async (message: string, canDismiss?: boolean, manualDismiss?: boolean, position?: string) => {
+const showToast = async (message: string, options?: any) => {  
   const config = {
     message,
-    position: position ? position : 'bottom',
-  } as any
+    ...options
+  } as any;
 
-  if (canDismiss) {
+  if (!options.position) {
+    config.position = 'bottom';
+  }
+  if (options.canDismiss) {
     config.buttons = [
       {
         text: translate('Dismiss'),
         role: 'cancel',
       },
     ]
   }
-
-  if (!manualDismiss) {
-    config.duration = 3000
+  if (!options.manualDismiss) {
+    config.duration = 3000;
   }
 
   const toast = await toastController.create(config)
   // present toast if manual dismiss is not needed
-  return !manualDismiss ? toast.present() : toast
+  return !options.manualDismiss ? toast.present() : toast
 }
 
 const handleDateTimeInput = (dateTimeValue: any) => {

src/views/InProgress.vue

@@ -384,7 +384,7 @@ export default defineComponent({
 
                 if (data.length) {
                   // additional parameters for dismiss button and manual dismiss ability
-                  toast = await showToast(translate('Order packed successfully. Document generation in process'), true, true)
+                  toast = await showToast(translate('Order packed successfully. Document generation in process'), { canDismiss: true, manualDismiss: true })
                   toast.present()
 
                   if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
@@ -472,7 +472,7 @@ export default defineComponent({
                 // the associated ids, currently passing the associated shipmentId
                 if (data.length) {
                   // additional parameters for dismiss button and manual dismiss ability
-                  toast = await showToast(translate('Order packed successfully. Document generation in process'), true, true)
+                  toast = await showToast(translate('Order packed successfully. Document generation in process'), { canDismiss: true, manualDismiss: true })
                   toast.present()
                   if (data.includes('printPackingSlip') && data.includes('printShippingLabel')) {
                     await OrderService.printShippingLabelAndPackingSlip(shipmentIds)