UIREQ-508: Add feedback after print button is clicked (#626)

* UIREQ-508: Add feedback after print button is clicked

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 * Add loading indicator when service point is switched. Fixes UIREQ-508.
 * Improve performance issues with preview for print pick slips. Fixes UIREQ-507.
+* Add feedback after print button is clicked. Fixes UIREQ-508.
 * Escape values passed to `react-to-print`. Fixes UIREQ-510.
 
 ## [3.0.4](https://github.com/folio-org/ui-requests/tree/v3.0.4) (2020-07-15)

package.json

@@ -178,7 +178,7 @@
     "react-fast-compare": "^3.2.0",
     "react-hot-loader": "^4.3.12",
     "react-router-prop-types": "^1.0.4",
-    "react-to-print": "^2.3.2",
+    "react-to-print": "^2.9.0",
     "redux-form": "^7.0.3"
   },
   "peerDependencies": {

src/components/PrintButton/PrintButton.js

@@ -13,12 +13,14 @@ class PrintButton extends React.Component {
     children: PropTypes.node.isRequired,
     onAfterPrint: PropTypes.func,
     onBeforePrint: PropTypes.func,
+    onBeforeGetContent: PropTypes.func,
     contentRef: PropTypes.object,
   };
 
   static defaultProps = {
     onAfterPrint: noop,
     onBeforePrint: noop,
+    onBeforeGetContent: noop,
   };
 
   getContent = () => {
@@ -40,6 +42,7 @@ class PrintButton extends React.Component {
     const {
       onAfterPrint,
       onBeforePrint,
+      onBeforeGetContent,
     } = this.props;
 
     return (
@@ -49,6 +52,7 @@ class PrintButton extends React.Component {
         trigger={this.renderTriggerButton}
         onAfterPrint={onAfterPrint}
         onBeforePrint={onBeforePrint}
+        onBeforeGetContent={onBeforeGetContent}
       />
     );
   }

src/routes/RequestsRoute.js

@@ -16,6 +16,7 @@ import {
   AppIcon,
   stripesConnect,
   IfPermission,
+  CalloutContext,
 } from '@folio/stripes/core';
 import {
   Button,
@@ -81,6 +82,8 @@ const urls = {
 };
 
 class RequestsRoute extends React.Component {
+  static contextType = CalloutContext;
+
   static manifest = {
     addressTypes: {
       type: 'okapi',
@@ -769,7 +772,15 @@ class RequestsRoute extends React.Component {
                 disabled={pickSlipsEmpty}
                 template={printTemplate}
                 contentRef={this.printContentRef}
-                onBeforePrint={onToggle}
+                onBeforeGetContent={
+                  () => new Promise(resolve => {
+                    this.context.sendCallout({ message: <FormattedMessage id="ui-requests.printInProgress" /> });
+                    onToggle();
+                    // without the timeout the printing process starts right away
+                    // and the callout and onToggle above are blocked
+                    setTimeout(() => resolve(), 1000);
+                  })
+                }
               >
                 <FormattedMessage
                   id="ui-requests.printPickSlips"

translations/ui-requests/en.json

@@ -188,5 +188,6 @@
   "permission.view": "Requests: View",
   "permission.create": "Requests: View, create",
   "permission.edit": "Requests: View, edit, cancel",
-  "pickSlipsLoading": "Pick slips are loading, please wait"
+  "pickSlipsLoading": "Pick slips are loading, please wait",
+  "printInProgress": "Print options loading in progress. It might take a few seconds, please be patient."
 }