[IMP] point_of_sale,pos_*: allow users to manage orders in the pos frontend

We now allow invoicing of finalized orders in an open session in this first
iteration of order management in the pos frontend. Additionally, receipt
reprinting is also introduced. With this feature, we can now reprint the
receipt of old orders.

closes odoo/odoo#51141

Task-id: 1981354
Related: odoo/enterprise#11690
Related: odoo/upgrade#1472
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

2 files changed, 84 insertions, 0 deletions

diff --git a/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js b/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js
new file mode 100644
index 00000000000..6abf4b2e93d
--- /dev/null
+++ b/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js
@@ -0,0 +1,66 @@
+odoo.define('point_of_sale.AbstractReceiptScreen', function (require) {
+    'use strict';
+
+    const { useRef } = owl.hooks;
+    const { nextFrame } = require('point_of_sale.utils');
+    const PosComponent = require('point_of_sale.PosComponent');
+    const Registries = require('point_of_sale.Registries');
+
+    /**
+     * This relies on the assumption that there is a reference to
+     * `order-receipt` so it is important to declare a `t-ref` to
+     * `order-receipt` in the template of the Component that extends
+     * this abstract component.
+     */
+    class AbstractReceiptScreen extends PosComponent {
+        constructor() {
+            super(...arguments);
+            this.orderReceipt = useRef('order-receipt');
+        }
+        async _printReceipt() {
+            if (this.env.pos.proxy.printer) {
+                const printResult = await this.env.pos.proxy.printer.print_receipt(this.orderReceipt.el.outerHTML);
+                if (printResult.successful) {
+                    return true;
+                } else {
+                    const { confirmed } = await this.showPopup('ConfirmPopup', {
+                        title: printResult.message.title,
+                        body: 'Do you want to print using the web printer?',
+                    });
+                    if (confirmed) {
+                        // We want to call the _printWeb when the popup is fully gone
+                        // from the screen which happens after the next animation frame.
+                        await nextFrame();
+                        return await this._printWeb();
+                    }
+                    return false;
+                }
+            } else {
+                return await this._printWeb();
+            }
+        }
+        /**
+         * https://stackoverflow.com/questions/21285902/printing-a-part-of-webpage-with-javascript
+         */
+        async _printWeb() {
+            try {
+                const isPrinted = document.execCommand('print', false, null);
+                if (!isPrinted) window.print();
+                return true;
+            } 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.'
+                    ),
+                });
+                return false;
+            }
+        }
+    }
+
+    Registries.Component.add(AbstractReceiptScreen);
+
+    return AbstractReceiptScreen;
+});
diff --git a/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js b/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js
new file mode 100644
index 00000000000..939f0daa43f
--- /dev/null
+++ b/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js
@@ -0,0 +1,18 @@
+odoo.define('point_of_sale.IndependentToOrderScreen', function (require) {
+    'use strict';
+
+    const PosComponent = require('point_of_sale.PosComponent');
+
+    class IndependentToOrderScreen extends PosComponent {
+        close() {
+            // To close this order-indenpendent screen, we forcefully trigger change
+            // on the selectedOrder attribute, which then shows the screen of the
+            // current order.
+            this.env.pos.trigger('change:selectedOrder', this.env.pos, this.env.pos.get_order(), {
+                silent: true,
+            });
+        }
+    }
+
+    return IndependentToOrderScreen;
+});