[FIX] pos_restaurant: Print Tip receipt from web browser

It was only possible to print the tip receipts through an IoT Box.
If no IoT Box is configured, we now show the browser's dialog.

3 files changed, 50 insertions, 9 deletions

diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/css/restaurant.css
index 72ec46cef06..c2716d93d46 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/css/restaurant.css
@@ -511,6 +511,23 @@
     padding: 1.5rem;
 }
 
+.tip-screen .pos-receipt-container {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+}
+
+@media print {
+    .tip-screen .pos-receipt-container {
+        display: block;
+    }
+    .tip-screen .pos-receipt-container * {
+        visibility: visible;
+    }
+}
+
 .pos-receipt .tip-form {
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
diff --git a/addons/pos_restaurant/static/src/js/Screens/TipScreen.js b/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
index ae3561e233a..e80a157bb54 100644
--- a/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
@@ -13,9 +13,7 @@ odoo.define('pos_restaurant.TipScreen', function (require) {
             this._totalAmount = this.currentOrder.get_total_with_tax();
         }
         mounted () {
-            if (this.env.pos.proxy.printer) {
-                this.printTipReceipt();
-            }
+            this.printTipReceipt();
         }
         get overallAmountStr() {
             const tipAmount = parse.float(this.state.inputTipAmount || '0');
@@ -116,15 +114,40 @@ odoo.define('pos_restaurant.TipScreen', function (require) {
                     data: data,
                     total: this.env.pos.format_currency(this.totalAmount),
                 });
-                const printResult = await this.env.pos.proxy.printer.print_receipt(receipt);
-                if (!printResult.successful) {
-                    await this.showPopup('ErrorPopup', {
-                        title: printResult.message.title,
-                        body: printResult.message.body,
-                    });
+
+                if (this.env.pos.proxy.printer) {
+                    await this._printIoT(receipt);
+                } else {
+                    await this._printWeb(receipt);
                 }
             }
         }
+
+        async _printIoT(receipt) {
+            const printResult = await this.env.pos.proxy.printer.print_receipt(receipt);
+            if (!printResult.successful) {
+                await this.showPopup('ErrorPopup', {
+                    title: printResult.message.title,
+                    body: printResult.message.body,
+                });
+            }
+        }
+
+        async _printWeb(receipt) {
+            try {
+                $(this.el).find('.pos-receipt-container').html(receipt);
+                const isPrinted = document.execCommand('print', false, null);
+                if (!isPrinted) window.print();
+            } catch (err) {
+                await this.showPopup('ErrorPopup', {
+                    title: this.env._t('Printing is not supported on some browsers'),
+                    body: this.env._t(
+                        'Printing is not supported on some browsers due to no default printing protocol ' +
+                            'is available. It is possible to print your tickets by making use of an IoT Box.'
+                    ),
+                });
+            }
+        }
     }
     TipScreen.template = 'pos_restaurant.TipScreen';
 
diff --git a/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
index 8244ca0bddc..bae809a873e 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
@@ -3,6 +3,7 @@
 
     <t t-name="pos_restaurant.TipScreen" owl="1">
         <div class="tip-screen screen">
+            <div class="pos-receipt-container"/>
             <div class="screen-content">
                 <div class="top-content">
                     <span class="button back" t-on-click="showScreen('FloorScreen')">