[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.

X-original-commit: 4b48109bb414b4768712d0e5d8706fd0088bef4b

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;

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';
 

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')">