[FIX] point_of_sale: skip receipt screen blinking

Currently when the pos.config is set to "Skip Preview", when printing a
receipt, the receipt or bill screen shows very quickly and disappears.
This is not good UX.

Now, the receipt is printed from the payment screen itself. We don't
need to show the receipt screen at all.

closes odoo/odoo#132550

Taskid: 3441238
Related: odoo/enterprise#46187
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/l10n_co_pos/static/src/overrides/components/order_receipt/order_receipt.xml

@@ -3,8 +3,8 @@
 <templates id="template" xml:space="preserve">
     <t t-name="l10n_co_pos.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('pos-receipt-order-data')]" position="inside">
-            <t t-if="receipt.l10n_co_dian !== false">
-                <div style="word-wrap:break-word;"><t t-esc="receipt.l10n_co_dian"/></div>
+            <t t-if="receiptData.receipt.l10n_co_dian !== false">
+                <div style="word-wrap:break-word;"><t t-esc="receiptData.receipt.l10n_co_dian"/></div>
             </t>
         </xpath>
     </t>

addons/l10n_fr_pos_cert/static/src/xml/OrderReceipt.xml

@@ -2,16 +2,16 @@
 <templates id="template" xml:space="preserve">
     <t t-name="l10n_fr_pos_cert.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('pos-receipt-order-data')]" position="inside">
-            <t t-if="receipt.l10n_fr_hash !== false">
+            <t t-if="receiptData.receipt.l10n_fr_hash !== false">
                 <br/>
-                <div style="word-wrap:break-word;"><t t-out="receipt.l10n_fr_hash"/></div>
+                <div style="word-wrap:break-word;"><t t-out="receiptData.receipt.l10n_fr_hash"/></div>
             </t>
         </xpath>
     </t>
 
     <t t-name="l10n_fr_pos_cert.OrderLinesReceipt" t-inherit="point_of_sale.OrderLinesReceipt" t-inherit-mode="extension">
-        <xpath expr="//div[@t-foreach='receipt.orderlines']" position="inside">
-            <t t-if="receipt.l10n_fr_hash !== false and line.price_type === 'manual'">
+        <xpath expr="//div[@id='receipt-orderline']" position="inside">
+            <t t-if="receiptData.receipt.l10n_fr_hash !== false and line.price_type === 'manual'">
                 <div class="pos-receipt-right-padding">
                     Old unit price:
                     <span class="oldPrice">

addons/l10n_gcc_pos/static/src/overrides/app/screens/receipt_screen/receipt/order_receipt.xml

@@ -3,7 +3,7 @@
     <t t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
 
         <xpath expr="//div[hasclass('pos-receipt-contact')]" position="after">
-            <t t-if="receipt.is_gcc_country">
+            <t t-if="receiptData.receipt.is_gcc_country">
                 <br/>
                 <br/>
                 <div class="pos-receipt-header">
@@ -15,87 +15,87 @@
             </t>
         </xpath>
 
-        <xpath expr="//t[@t-esc='receipt.cashier']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//t[@t-esc='receiptData.receipt.cashier']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//t[@t-esc='receipt.cashier']/.." position="after">
-            <div t-if="receipt.is_gcc_country" t-translation="off">
-                <div>Served by / خدم بواسطة <t t-esc="receipt.cashier"/></div>
+        <xpath expr="//t[@t-esc='receiptData.receipt.cashier']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" t-translation="off">
+                <div>Served by / خدم بواسطة <t t-esc="receiptData.receipt.cashier"/></div>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.subtotal)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.subtotal)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.subtotal)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.subtotal)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" t-translation="off">
                 Subtotal / الإجمالي الفرعي
-                <span t-esc="env.utils.formatCurrency(receipt.subtotal)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.subtotal)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_with_tax)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_with_tax)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_with_tax)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_with_tax)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
                 TOTAL / الإجمالي
-                <span t-esc="env.utils.formatCurrency(receipt.total_with_tax)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.rounding_applied)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.rounding_applied)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.rounding_applied)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.rounding_applied)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
                 Rounding / التقريب
-                <span t-esc="env.utils.formatCurrency(receipt.rounding_applied)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.rounding_applied)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_rounded)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_rounded)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_rounded)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_rounded)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" class="pos-receipt-amount pos-receipt-amount-arabic" t-translation="off">
                 To Pay / للسداد
-                <span t-esc="env.utils.formatCurrency(receipt.total_rounded)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_rounded)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.change)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.change)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.change)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" class="pos-receipt-amount receipt-change pos-receipt-amount-arabic" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.change)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" class="pos-receipt-amount receipt-change pos-receipt-amount-arabic" t-translation="off">
                 CHANGE / الباقي
-                <span t-esc="env.utils.formatCurrency(receipt.change)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.change)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_discount)']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_discount)']/.." position="attributes">
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
-        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receipt.total_discount)']/.." position="after">
-            <div t-if="receipt.is_gcc_country" t-translation="off">
+        <xpath expr="//span[@t-esc='env.utils.formatCurrency(receiptData.receipt.total_discount)']/.." position="after">
+            <div t-if="receiptData.receipt.is_gcc_country" t-translation="off">
                 Discounts / الخصومات
-                <span t-esc="env.utils.formatCurrency(receipt.total_discount)" class="pos-receipt-right-align"/>
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_discount)" class="pos-receipt-right-align"/>
             </div>
         </xpath>
 
         <xpath expr="//div[hasclass('pos-receipt-taxes')]/span[text()='Total']" position="replace">
-            <span t-if="receipt.is_gcc_country" t-translation="off">Total Taxes / إجمالي الضرائب</span>
+            <span t-if="receiptData.receipt.is_gcc_country" t-translation="off">Total Taxes / إجمالي الضرائب</span>
             <span t-else="">Total</span>
         </xpath>
     </t>
 
     <t t-inherit="point_of_sale.OrderLinesReceipt" t-inherit-mode="extension">
         <xpath expr="//t[@t-esc='line.unit_name']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
         <xpath expr="//t[@t-esc='line.unit_name']/.." position="after">
-            <t t-if="receipt.is_gcc_country">
+            <t t-if="receiptData.receipt.is_gcc_country">
                 <div class="pos-receipt-left-padding">
                     <t t-esc="Math.round(line.quantity * Math.pow(10, pos.dp['Product Unit of Measure'])) / Math.pow(10, pos.dp['Product Unit of Measure'])"/>
                     <t t-if="!line.is_in_unit" t-esc="line.unit_name" />
@@ -112,10 +112,10 @@
         </xpath>
 
         <xpath expr="//t[@t-esc='line.discount']/.." position="attributes">
-            <attribute name="t-if">!receipt.is_gcc_country</attribute>
+            <attribute name="t-if">!receiptData.receipt.is_gcc_country</attribute>
         </xpath>
         <xpath expr="//t[@t-esc='line.discount']/.." position="after">
-            <div class="pos-receipt-left-padding" style="display: inline-flex;" t-if="receipt.is_gcc_country" t-translation="off">
+            <div class="pos-receipt-left-padding" style="display: inline-flex;" t-if="receiptData.receipt.is_gcc_country" t-translation="off">
                 <div>Discount / الخصم</div>: <t t-esc="line.discount" />%
             </div>
         </xpath>

addons/l10n_gcc_pos/static/src/overrides/app/screens/receipt_screen/receipt_screen.js

@@ -0,0 +1,16 @@
+/** @odoo-module */
+
+import { ReceiptScreen } from "@point_of_sale/app/screens/receipt_screen/receipt_screen";
+import { patch } from "@web/core/utils/patch";
+
+patch(ReceiptScreen.prototype, {
+    get receiptData() {
+        const receiptData = super.receiptData;
+        const receipt = receiptData.receipt;
+        const country = receiptData.order.pos.company.country;
+        receipt.is_gcc_country = country
+            ? ["SA", "AE", "BH", "OM", "QA", "KW"].includes(country && country.code)
+            : false;
+        return receiptData;
+    },
+});

addons/l10n_gcc_pos/static/src/overrides/components/order_receipt/order_receipt.js

@@ -1,16 +0,0 @@
-/** @odoo-module */
-
-import { OrderReceipt } from "@point_of_sale/app/screens/receipt_screen/receipt/receipt";
-import { patch } from "@web/core/utils/patch";
-
-patch(OrderReceipt.prototype, {
-    get receiptEnv() {
-        const receipt_render_env = super.receiptEnv;
-        const receipt = receipt_render_env.receipt;
-        const country = receipt_render_env.order.pos.company.country;
-        receipt.is_gcc_country = country
-            ? ["SA", "AE", "BH", "OM", "QA", "KW"].includes(country && country.code)
-            : false;
-        return receipt_render_env;
-    },
-});

addons/l10n_in_pos/static/src/overrides/components/pos_receipt.xml

@@ -2,13 +2,13 @@
 <templates id="template" xml:space="preserve">
     <t t-name="l10n_in_pos.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('orderlines')]" position="before">
-            <t t-if="receipt.partner and pos.company.country and pos.company.country.code == 'IN'">
+            <t t-if="receiptData.receipt.partner and pos.company.country and pos.company.country.code == 'IN'">
                 <div class="pos-receipt-center-align">
-                    <div><t t-esc="receipt.partner.name" /></div>
-                    <t t-if="receipt.partner.phone">
+                    <div><t t-esc="receiptData.receipt.partner.name" /></div>
+                    <t t-if="receiptData.receipt.partner.phone">
                         <div>
                             <span>Phone: </span>
-                            <t t-esc="receipt.partner.phone" />
+                            <t t-esc="receiptData.receipt.partner.phone" />
                         </div>
                     </t>
                     <br />
@@ -18,7 +18,7 @@
     </t>
 
     <t t-name="l10n_in_pos.OrderLinesReceipt" t-inherit="point_of_sale.OrderLinesReceipt" t-inherit-mode="extension">
-        <xpath expr="//div[@t-foreach='receipt.orderlines']" position="inside">
+        <xpath expr="//div[@id='receipt-orderline']" position="inside">
             <t t-if="line.l10n_in_hsn_code and pos.company.country and pos.company.country.code == 'IN'">
                 <div class="pos-receipt-left-padding">
                     <span>HSN Code: </span>

addons/l10n_sa_pos/static/src/overrides/components/order_receipt/order_receipt.xml

@@ -2,20 +2,20 @@
 <templates id="template" xml:space="preserve">
     <t t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//img[hasclass('pos-receipt-logo')]" position="after">
-            <t t-if="receipt.is_gcc_country and !receipt.is_settlement">
-                <img t-if="receipt.qr_code" id="qrcode" t-att-src="receipt.qr_code" class="pos-receipt-logo"/>
+            <t t-if="receiptData.receipt.is_gcc_country and !receipt.is_settlement">
+                <img t-if="receiptData.receipt.qr_code" id="qrcode" t-att-src="receiptData.receipt.qr_code" class="pos-receipt-logo"/>
                 <br/>
             </t>
         </xpath>
 
         <xpath expr="//span[@id='title_english']" position="replace">
-            <t t-if="!receipt.is_settlement">
+            <t t-if="!receiptData.receipt.is_settlement">
                 <span id="title_english">Simplified Tax Invoice</span>
             </t>
         </xpath>
 
         <xpath expr="//span[@id='title_arabic']" position="replace">
-            <t t-if="!receipt.is_settlement">
+            <t t-if="!receiptData.receipt.is_settlement">
                 <span id="title_arabic">فاتورة ضريبية مبسطة</span>
             </t>
         </xpath>

addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.js

@@ -17,7 +17,8 @@ import { PaymentScreenNumpad } from "@point_of_sale/app/screens/payment_screen/n
 import { PaymentScreenPaymentLines } from "@point_of_sale/app/screens/payment_screen/payment_lines/payment_lines";
 import { PaymentScreenStatus } from "@point_of_sale/app/screens/payment_screen/payment_status/payment_status";
 import { usePos } from "@point_of_sale/app/store/pos_hook";
-import { Component, useState } from "@odoo/owl";
+import { Component, useState, useRef } from "@odoo/owl";
+import { renderToElement } from "@web/core/utils/render";
 
 export class PaymentScreen extends Component {
     static template = "point_of_sale.PaymentScreen";
@@ -35,6 +36,7 @@ export class PaymentScreen extends Component {
         this.report = useService("report");
         this.notification = useService("pos_notification");
         this.hardwareProxy = useService("hardware_proxy");
+        this.orderReceipt = useRef("order-receipt");
         this.payment_methods_from_config = this.pos.payment_methods.filter((method) =>
             this.pos.config.payment_method_ids.includes(method.id)
         );
@@ -279,7 +281,7 @@ export class PaymentScreen extends Component {
             await this.postPushOrderResolve(syncOrderResult.map((res) => res.id));
         }
 
-        this.afterOrderValidation(!!syncOrderResult && syncOrderResult.length > 0);
+        await this.afterOrderValidation(!!syncOrderResult && syncOrderResult.length > 0);
     }
     async postPushOrderResolve(ordersServerId) {
         const postPushResult = await this._postPushOrderResolve(this.currentOrder, ordersServerId);
@@ -310,7 +312,38 @@ export class PaymentScreen extends Component {
         }
         // Always show the next screen regardless of error since pos has to
         // continue working even offline.
-        this.pos.showScreen(this.nextScreen);
+        let nextScreen = this.nextScreen;
+
+        if (
+            nextScreen === "ReceiptScreen" &&
+            !this.currentOrder._printed &&
+            this.pos.config.iface_print_auto
+        ) {
+            const invoiced_finalized = this.currentOrder.is_to_invoice()
+                ? this.currentOrder.finalized
+                : true;
+
+            if (this.hardwareProxy.printer && invoiced_finalized) {
+                const orderReceipt = renderToElement("point_of_sale.OrderReceipt", {
+                    receiptData: {
+                        ...this.pos.get_order().getOrderReceiptEnv(),
+                    },
+                    pos: this.pos,
+                    env: this.env,
+                });
+
+                // Need to await to have the result in case of automatic skip screen.
+                const printResult = await this.hardwareProxy.printer.printReceipt(orderReceipt);
+
+                if (printResult.successful && this.pos.config.iface_print_skip_screen) {
+                    this.pos.removeOrder(this.currentOrder);
+                    this.pos.add_new_order();
+                    nextScreen = "ProductScreen";
+                }
+            }
+        }
+
+        this.pos.showScreen(nextScreen);
     }
     get nextScreen() {
         return !this.error ? "ReceiptScreen" : "ProductScreen";

addons/point_of_sale/static/src/app/screens/payment_screen/payment_screen.xml

@@ -32,7 +32,6 @@
         </t>
     </t>
 
-
     <t t-name="point_of_sale.PaymentScreenTop">
         <div class="top-content d-flex align-items-center p-2 border-bottom text-center">
             <div class="button back btn btn-lg btn-secondary" t-on-click="() => pos.showScreen('ProductScreen')">

addons/point_of_sale/static/src/app/screens/receipt_screen/abstract_receipt_screen.js

@@ -21,7 +21,7 @@ export class AbstractReceiptScreen extends Component {
     async _printReceipt() {
         if (this.hardwareProxy.printer) {
             const printResult = await this.hardwareProxy.printer.printReceipt(
-                this.orderReceipt.el.firstChild
+                this.orderReceipt.el.firstChild.firstChild
             );
             if (printResult.successful) {
                 return true;

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml

@@ -0,0 +1,245 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="point_of_sale.OrderReceipt">
+        <div class="pos-receipt">
+            <t t-if="receiptData.receipt.company.logo">
+                <img class="pos-receipt-logo" t-att-src="receiptData.receipt.company.logo" alt="Logo"/>
+                <br/>
+            </t>
+            <t t-if="!receiptData.receipt.company.logo">
+                <h2 class="pos-receipt-center-align">
+                    <t t-esc="receiptData.receipt.company.name" />
+                </h2>
+                <br/>
+            </t>
+            <div class="pos-receipt-contact">
+                <t t-if="receiptData.receipt.company.contact_address">
+                    <div><t t-esc="receiptData.receipt.company.contact_address" /></div>
+                </t>
+                <t t-if="receiptData.receipt.company.phone">
+                    <div>Tel:<t t-esc="receiptData.receipt.company.phone" /></div>
+                </t>
+                <t t-if="receiptData.receipt.company.vat">
+                    <div><t t-esc="receiptData.receipt.company.vat_label"/>:<t t-esc="receiptData.receipt.company.vat" /></div>
+                </t>
+                <t t-if="receiptData.receipt.company.email">
+                    <div><t t-esc="receiptData.receipt.company.email" /></div>
+                </t>
+                <t t-if="receiptData.receipt.company.website">
+                    <div><t t-esc="receiptData.receipt.company.website" /></div>
+                </t>
+                <t t-if="receiptData.receipt.header">
+                    <div style="white-space:pre-line"><t t-esc="receiptData.receipt.header" /></div>
+                </t>
+                <t t-if="receiptData.receipt.cashier">
+                    <div class="cashier">
+                        <div>--------------------------------</div>
+                        <div>Served by <t t-esc="receiptData.receipt.cashier" /></div>
+                    </div>
+                </t>
+            </div>
+            <br /><br />
+
+            <!-- Orderlines -->
+            <div class="orderlines">
+                <t t-call="point_of_sale.OrderLinesReceipt"/>
+            </div>
+            <!-- Subtotal -->
+
+            <t t-if="!isTaxIncluded">
+                <div class="pos-receipt-right-align">--------</div>
+                <br/>
+                <div>Subtotal<span t-esc="env.utils.formatCurrency(receiptData.receipt.subtotal)" class="pos-receipt-right-align"/></div>
+                <t t-foreach="receiptData.receipt.tax_details" t-as="tax" t-key="tax.name">
+                    <div class="responsive-price">
+                        <t t-esc="tax.name" />
+                        <span t-esc='env.utils.formatCurrency(tax.amount, false)' class="pos-receipt-right-align"/>
+                    </div>
+                </t>
+            </t>
+
+            <!-- Total -->
+            <div class="pos-receipt-right-align">--------</div>
+            <br/>
+            <div class="pos-receipt-amount">
+                TOTAL
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax)" class="pos-receipt-right-align"/>
+            </div>
+            <t t-if="receiptData.receipt.total_rounded != receiptData.receipt.total_with_tax">
+                <div class="pos-receipt-amount">
+                  Rounding
+                <span t-esc='env.utils.formatCurrency(receiptData.receipt.rounding_applied)' class="pos-receipt-right-align"/>
+                </div>
+                <div class="pos-receipt-amount">
+                  To Pay
+                 <span t-esc='env.utils.formatCurrency(receiptData.receipt.total_rounded)' class="pos-receipt-right-align"/>
+              </div>
+            </t>
+            <br/><br/>
+
+            <!-- Payment Lines -->
+
+            <t t-foreach="receiptData.receipt.paymentlines" t-as="line" t-key="line.cid">
+                <div>
+                    <t t-esc="line.name" />
+                    <span t-esc="env.utils.formatCurrency(line.amount, false)" class="pos-receipt-right-align"/>
+                </div>
+            </t>
+            <br/>
+
+            <div class="pos-receipt-amount receipt-change">
+                CHANGE
+                <span t-esc="env.utils.formatCurrency(receiptData.receipt.change)" class="pos-receipt-right-align"/>
+            </div>
+            <br/>
+
+            <!-- Extra Payment Info -->
+
+            <t t-if="receiptData.receipt.total_discount">
+                <div>
+                    Discounts
+                    <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_discount)" class="pos-receipt-right-align"/>
+                </div>
+            </t>
+            <div t-if="receiptData.isTaxIncluded" class="pos-receipt-taxes">
+                <span />
+                <span>VAT%</span>
+                <span>VAT</span>
+                <span>ExVAT</span>
+                <span>Total</span>
+                <t t-foreach="receiptData.receipt.tax_details" t-as="tax" t-key="tax.tax.id">
+                    <span />
+                    <span><t t-esc="tax.tax.amount"/> %</span> 
+                    <span t-esc="env.utils.formatCurrency(tax.amount, false)" />
+                    <span t-esc="env.utils.formatCurrency(tax.base, false)" />
+                    <span t-esc="env.utils.formatCurrency(tax.amount + tax.base, false)" />
+                </t>
+                <t t-if="receiptData.receipt.tax_details.length > 1">
+                    <span />
+                    <span />
+                    <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_tax, false)" />
+                    <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_without_tax, false)" />
+                    <span t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax, false)" />
+                </t>
+            </div>
+
+            <div class="before-footer" />
+
+            <div t-if="receiptData.receipt.pos_qr_code">
+                <br /><br />
+                <div class="pos-receipt-order-data">
+                    Scan me to request an invoice for your purchase.
+                </div>
+                <img id="posqrcode" t-att-src="receiptData.receipt.pos_qr_code" class="pos-receipt-logo"/>
+            </div>
+
+            <div t-if="receiptData.receipt.ticket_code">
+                <br /><br />
+                <div class="pos-receipt-order-data">
+                    You can go to <t t-out="receiptData.receipt.base_url"/>/pos/ticket and use the code below to request an invoice online
+                </div>
+                <div class="pos-receipt-order-data">
+                    Unique Code: <t t-out="receiptData.receipt.ticket_code"/>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div t-if="receiptData.receipt.footer"  class="pos-receipt-center-align" style="white-space:pre-line">
+                <br/>
+                <t t-esc="receiptData.receipt.footer" />
+                <br/>
+                <br/>
+            </div>
+
+            <div class="after-footer">
+                <t t-foreach="receiptData.receipt.paymentlines" t-as="line" t-key="line_index">
+                    <t t-if="line.ticket">
+                        <br />
+                        <div class="pos-payment-terminal-receipt">
+                            <pre t-esc="line.ticket" />
+                        </div>
+                    </t>
+                </t>
+            </div>
+
+            <br/>
+            <t t-if="receiptData.shippingDate">
+                <div class="pos-receipt-order-data">
+                    Expected delivery:
+                    <div><t t-esc="receiptData.shippingDate" /></div>
+                </div>
+            </t>
+
+            <br/>
+            <div class="pos-receipt-order-data">
+                <div><t t-esc="receiptData.receipt.name" /></div>
+                <t t-if="receiptData.receipt.date.localestring">
+                    <div><t t-esc="receiptData.receipt.date.localestring" /></div>
+                </t>
+                <t t-else="">
+                    <div><t t-esc="receiptData.receipt.date.validation_date" /></div>
+                </t>
+            </div>
+        </div>
+    </t>
+    <t t-name="point_of_sale.OrderLinesReceipt">
+        <div id="receipt-orderline" t-foreach="receiptData.receipt.orderlines" t-as="line" t-key="line.id" t-att-class="{'border-start border-3 ps-1': line.isPartOfCombo }">
+            <div t-esc="line.product_name_wrapped[0]" />
+                <span>
+                    <t t-foreach="line.product_name_wrapped.slice(1)" t-as="wrapped_line" t-key="wrapped_line_index">
+                        <t t-esc="wrapped_line"/>
+                    </t>
+                </span>
+                <t t-if="line.display_discount_policy == 'without_discount' and line.price != line.price_lst">
+                    <div class="pos-receipt-left-padding">
+                        <t t-esc="env.utils.formatCurrency(line.price_lst, false)" />
+                        ->
+                        <t t-esc="env.utils.formatCurrency(line.price, false)" />
+                    </div>
+                </t>
+                <t t-elif="line.discount !== 0">
+                    <div class="pos-receipt-left-padding">
+                        <t t-if="pos.config.iface_tax_included === 'total'">
+                            <t t-esc="env.utils.formatCurrency(line.price_with_tax_before_discount, false)"/>
+                        </t>
+                        <t t-else="">
+                            <t t-esc="env.utils.formatCurrency(line.unitDisplayPriceBeforeDiscount, false)"/>
+                        </t>
+                    </div>
+                </t>
+                <t t-if="line.discount !== 0">
+                    <div class="pos-receipt-left-padding">
+                        Discount: <t t-esc="line.discount" />%
+                    </div>
+                </t>
+                <div class="pos-receipt-left-padding">
+                    <t t-esc="Math.round(line.quantity * Math.pow(10, pos.dp['Product Unit of Measure'])) / Math.pow(10, pos.dp['Product Unit of Measure'])"/>
+                    <t t-if="!line.is_in_unit" t-esc="line.unit_name" />
+                    x
+                    <t t-esc="env.utils.formatCurrency(line.price_display_one)" />
+                    <div class="price_display pos-receipt-right-align">
+                        <span t-esc="env.utils.formatCurrency(line.price_display, false)" />
+                        <span class="tax-letter" />
+                    </div>
+                </div>
+                <t t-if="line.customer_note">
+                    <div class="pos-receipt-left-padding pos-receipt-customer-note">
+                        <t t-esc="line.customer_note"/>
+                    </div>
+                </t>
+                <t t-if="line.pack_lot_lines">
+                    <div class="pos-receipt-left-padding">
+                        <ul>
+                            <t t-foreach="line.pack_lot_lines" t-as="lot" t-key="lot.cid">
+                                <li>
+                                    SN <t t-esc="lot.lot_name"/>
+                                </li>
+                            </t>
+                        </ul>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </t>
+</templates>

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.js

@@ -1,61 +0,0 @@
-/** @odoo-module */
-
-import { usePos } from "@point_of_sale/app/store/pos_hook";
-import { WrappedProductNameLines } from "@point_of_sale/app/screens/receipt_screen/receipt/wrapped_product_name";
-import { Component, onWillUpdateProps } from "@odoo/owl";
-
-export class OrderReceipt extends Component {
-    static components = { WrappedProductNameLines };
-    static template = "point_of_sale.OrderReceipt";
-
-    setup() {
-        this.pos = usePos();
-        this._receiptEnv = this.props.order.getOrderReceiptEnv();
-
-        onWillUpdateProps((nextProps) => {
-            this._receiptEnv = nextProps.order.getOrderReceiptEnv();
-        });
-    }
-    get receipt() {
-        return this.receiptEnv.receipt;
-    }
-    get orderlines() {
-        return this.receiptEnv.orderlines;
-    }
-    get paymentlines() {
-        return this.receiptEnv.paymentlines;
-    }
-    get isTaxIncluded() {
-        return Math.abs(this.receipt.subtotal - this.receipt.total_with_tax) <= 0.000001;
-    }
-    get receiptEnv() {
-        return this._receiptEnv;
-    }
-    get shippingDate() {
-        return this.receiptEnv.shippingDate;
-    }
-    /**
-     * @param {number} lineId
-     * @returns {boolean} true if the line is part of a combo
-     */
-    lineIsPartOfCombo(lineId) {
-        return this.orderlines.find((l) => l.id === lineId || l.cid === lineId).isPartOfCombo();
-    }
-
-    /**
-     * @param {object} line item of the array given by `this.receiptEnv.orderlines`
-     * @returns {object} the corresponding tax objects from `pos.taxes_by_id`
-     */
-    getOrderlineTaxes(line) {
-        return Object.keys(line.tax_details).map((taxId) => this.pos.taxes_by_id[taxId]);
-    }
-
-    /**
-     * Override this method to customize the tax letter mapping.
-     * @param {array} taxes array of tax objects from `pos.taxes_by_id`
-     * @returns {string} the tax letter
-     */
-    getTaxLetter(...taxes) {
-        return "";
-    }
-}

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/receipt.xml

@@ -1,244 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <t t-name="point_of_sale.OrderReceipt">
-        <div class="pos-receipt d-inline-block m-3 p-3 border rounded bg-view text-start overflow-hidden">
-            <t t-if="receipt.company.logo">
-                <img class="pos-receipt-logo" t-att-src="receipt.company.logo" alt="Logo"/>
-                <br/>
-            </t>
-            <t t-if="!receipt.company.logo">
-                <h2 class="pos-receipt-center-align">
-                    <t t-esc="receipt.company.name" />
-                </h2>
-                <br/>
-            </t>
-            <div class="pos-receipt-contact">
-                <t t-if="receipt.company.contact_address">
-                    <div><t t-esc="receipt.company.contact_address" /></div>
-                </t>
-                <t t-if="receipt.company.phone">
-                    <div>Tel:<t t-esc="receipt.company.phone" /></div>
-                </t>
-                <t t-if="receipt.company.vat">
-                    <div><t t-esc="receipt.company.vat_label"/>:<t t-esc="receipt.company.vat" /></div>
-                </t>
-                <t t-if="receipt.company.email">
-                    <div><t t-esc="receipt.company.email" /></div>
-                </t>
-                <t t-if="receipt.company.website">
-                    <div><t t-esc="receipt.company.website" /></div>
-                </t>
-                <t t-if="receipt.header">
-                    <div style="white-space:pre-line"><t t-esc="receipt.header" /></div>
-                </t>
-                <t t-if="receipt.cashier">
-                    <div class="cashier">
-                        <div>--------------------------------</div>
-                        <div>Served by <t t-esc="receipt.cashier" /></div>
-                    </div>
-                </t>
-            </div>
-            <br /><br />
-
-            <!-- Orderlines -->
-
-            <div class="orderlines">
-                <t t-call="point_of_sale.OrderLinesReceipt"/>
-            </div>
-
-            <!-- Subtotal -->
-
-            <t t-if="!isTaxIncluded">
-                <div class="pos-receipt-right-align">--------</div>
-                <br/>
-                <div>Subtotal<span t-esc="env.utils.formatCurrency(receipt.subtotal)" class="pos-receipt-right-align"/></div>
-                <t t-foreach="receipt.tax_details" t-as="tax" t-key="tax.name">
-                    <div class="responsive-price">
-                        <t t-esc="tax.name" />
-                        <span t-esc='env.utils.formatCurrency(tax.amount, false)' class="pos-receipt-right-align"/>
-                    </div>
-                </t>
-            </t>
-
-            <!-- Total -->
-            <div class="pos-receipt-right-align">--------</div>
-            <br/>
-            <div class="pos-receipt-amount">
-                TOTAL
-                <span t-esc="env.utils.formatCurrency(receipt.total_with_tax)" class="pos-receipt-right-align"/>
-            </div>
-            <t t-if="receipt.total_rounded != receipt.total_with_tax">
-                <div class="pos-receipt-amount">
-                  Rounding
-                <span t-esc='env.utils.formatCurrency(receipt.rounding_applied)' class="pos-receipt-right-align"/>
-                </div>
-                <div class="pos-receipt-amount">
-                  To Pay
-                 <span t-esc='env.utils.formatCurrency(receipt.total_rounded)' class="pos-receipt-right-align"/>
-              </div>
-            </t>
-            <br/><br/>
-
-            <!-- Payment Lines -->
-
-            <t t-foreach="receipt.paymentlines" t-as="line" t-key="line.cid">
-                <div>
-                    <t t-esc="line.name" />
-                    <span t-esc="env.utils.formatCurrency(line.amount, false)" class="pos-receipt-right-align"/>
-                </div>
-            </t>
-            <br/>
-
-            <div class="pos-receipt-amount receipt-change">
-                CHANGE
-                <span t-esc="env.utils.formatCurrency(receipt.change)" class="pos-receipt-right-align"/>
-            </div>
-            <br/>
-
-            <!-- Extra Payment Info -->
-
-            <t t-if="receipt.total_discount">
-                <div>
-                    Discounts
-                    <span t-esc="env.utils.formatCurrency(receipt.total_discount)" class="pos-receipt-right-align"/>
-                </div>
-            </t>
-            <div t-if="isTaxIncluded" class="pos-receipt-taxes">
-                <span />
-                <span>VAT%</span>
-                <span>VAT</span>
-                <span>ExVAT</span>
-                <span>Total</span>
-                <t t-foreach="receipt.tax_details" t-as="tax" t-key="tax.tax.id">
-                    <span t-esc="getTaxLetter(tax.tax)" />
-                    <span><t t-esc="tax.tax.amount"/> %</span> 
-                    <span t-esc="env.utils.formatCurrency(tax.amount, false)" />
-                    <span t-esc="env.utils.formatCurrency(tax.base, false)" />
-                    <span t-esc="env.utils.formatCurrency(tax.amount + tax.base, false)" />
-                </t>
-                <t t-if="receipt.tax_details.length > 1">
-                    <span />
-                    <span />
-                    <span t-esc="env.utils.formatCurrency(receipt.total_tax, false)" />
-                    <span t-esc="env.utils.formatCurrency(receipt.total_without_tax, false)" />
-                    <span t-esc="env.utils.formatCurrency(receipt.total_with_tax, false)" />
-                </t>
-            </div>
-
-            <div class="before-footer" />
-
-            <div t-if="receipt.pos_qr_code">
-                <br /><br />
-                <div class="pos-receipt-order-data">
-                    Scan me to request an invoice for your purchase.
-                </div>
-                <img id="posqrcode" t-att-src="receipt.pos_qr_code" class="pos-receipt-logo"/>
-            </div>
-
-            <div t-if="receipt.ticket_code">
-                <br /><br />
-                <div class="pos-receipt-order-data">
-                    You can go to <t t-out="receipt.base_url"/>/pos/ticket and use the code below to request an invoice online
-                </div>
-                <div class="pos-receipt-order-data">
-                    Unique Code: <t t-out="receipt.ticket_code"/>
-                </div>
-            </div>
-
-            <!-- Footer -->
-            <div t-if="receipt.footer"  class="pos-receipt-center-align" style="white-space:pre-line">
-                <br/>
-                <t t-esc="receipt.footer" />
-                <br/>
-                <br/>
-            </div>
-
-            <div class="after-footer">
-                <t t-foreach="receipt.paymentlines" t-as="line" t-key="line_index">
-                    <t t-if="line.ticket">
-                        <br />
-                        <div class="pos-payment-terminal-receipt">
-                            <pre t-esc="line.ticket" />
-                        </div>
-                    </t>
-                </t>
-            </div>
-
-            <br/>
-            <t t-if="shippingDate">
-                <div class="pos-receipt-order-data">
-                    Expected delivery:
-                    <div><t t-esc="shippingDate" /></div>
-                </div>
-            </t>
-
-            <br/>
-            <div class="pos-receipt-order-data">
-                <div><t t-esc="receipt.name" /></div>
-                <t t-if="receipt.date.localestring">
-                    <div><t t-esc="receipt.date.localestring" /></div>
-                </t>
-                <t t-else="">
-                    <div><t t-esc="receipt.date.validation_date" /></div>
-                </t>
-            </div>
-        </div>
-    </t>
-    <t t-name="point_of_sale.OrderLinesReceipt">
-        <div t-foreach="receipt.orderlines" t-as="line" t-key="line.id"
-             t-att-class="{'border-start border-3 ps-1': lineIsPartOfCombo(line.id)}">
-            <div t-esc="line.product_name_wrapped[0]" />
-            <WrappedProductNameLines line="line" />
-            <t t-if="line.display_discount_policy == 'without_discount' and line.price != line.price_lst">
-                <div class="pos-receipt-left-padding">
-                    <t t-esc="env.utils.formatCurrency(line.price_lst, false)" />
-                    ->
-                    <t t-esc="env.utils.formatCurrency(line.price, false)" />
-                </div>
-            </t>
-            <t t-elif="line.discount !== 0">
-                <div class="pos-receipt-left-padding">
-                    <t t-if="pos.config.iface_tax_included === 'total'">
-                        <t t-esc="env.utils.formatCurrency(line.price_with_tax_before_discount, false)"/>
-                    </t>
-                    <t t-else="">
-                        <t t-esc="env.utils.formatCurrency(line.unitDisplayPriceBeforeDiscount, false)"/>
-                    </t>
-                </div>
-            </t>
-            <t t-if="line.discount !== 0">
-                <div class="pos-receipt-left-padding">
-                    Discount: <t t-esc="line.discount" />%
-                </div>
-            </t>
-            <div class="pos-receipt-left-padding">
-                <t t-esc="Math.round(line.quantity * Math.pow(10, pos.dp['Product Unit of Measure'])) / Math.pow(10, pos.dp['Product Unit of Measure'])"/>
-                <t t-if="!line.is_in_unit" t-esc="line.unit_name" />
-                x
-                <t t-esc="env.utils.formatCurrency(line.price_display_one)" />
-                <div class="price_display pos-receipt-right-align">
-                    <span t-if="!(lineIsPartOfCombo(line.id) and line.price_display===0)" t-esc="env.utils.formatCurrency(line.price_display, false)" />
-                    <span t-esc="getTaxLetter(...getOrderlineTaxes(line))" class="tax-letter" /> 
-                </div>
-            </div>
-            <t t-if="line.customer_note">
-                <div class="pos-receipt-left-padding pos-receipt-customer-note">
-                    <t t-esc="line.customer_note"/>
-                </div>
-            </t>
-            <t t-if="line.pack_lot_lines">
-                <div class="pos-receipt-left-padding">
-                    <ul>
-                        <t t-foreach="line.pack_lot_lines" t-as="lot" t-key="lot.cid">
-                            <li>
-                                SN <t t-esc="lot.lot_name"/>
-                            </li>
-                        </t>
-                    </ul>
-                </div>
-            </t>
-        </div>
-    </t>
-
-</templates>

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/wrapped_product_name.js

@@ -1,7 +0,0 @@
-/** @odoo-module */
-
-import { Component } from "@odoo/owl";
-
-export class WrappedProductNameLines extends Component {
-    static template = "point_of_sale.WrappedProductNameLines";
-}

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/wrapped_product_name.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-
-    <t t-name="point_of_sale.WrappedProductNameLines">
-        <span>
-            <t t-foreach="props.line.product_name_wrapped.slice(1)" t-as="wrapped_line" t-key="wrapped_line_index">
-                <t t-esc="wrapped_line"/>
-            </t>
-        </span>
-    </t>
-
-</templates>

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.js

@@ -5,15 +5,13 @@ import { useErrorHandlers } from "@point_of_sale/app/utils/hooks";
 import { AbstractReceiptScreen } from "@point_of_sale/app/screens/receipt_screen/abstract_receipt_screen";
 import { OfflineErrorPopup } from "@point_of_sale/app/errors/popups/offline_error_popup";
 import { registry } from "@web/core/registry";
-import { OrderReceipt } from "@point_of_sale/app/screens/receipt_screen/receipt/receipt";
-import { onMounted, useRef, status, useState, onWillStart } from "@odoo/owl";
+import { useRef, useState, onWillStart } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/store/pos_hook";
 import { useService } from "@web/core/utils/hooks";
 import { BasePrinter } from "@point_of_sale/app/printer/base_printer";
 
 export class ReceiptScreen extends AbstractReceiptScreen {
     static template = "point_of_sale.ReceiptScreen";
-    static components = { OrderReceipt };
 
     setup() {
         super.setup();
@@ -30,23 +28,6 @@ export class ReceiptScreen extends AbstractReceiptScreen {
         this.orderUiState.inputEmail =
             this.orderUiState.inputEmail || (partner && partner.email) || "";
 
-        onMounted(() => {
-            // Here, we send a task to the event loop that handles
-            // the printing of the receipt when the component is mounted.
-            // We are doing this because we want the receipt screen to be
-            // displayed regardless of what happen to the handleAutoPrint
-            // call.
-            setTimeout(async () => {
-                if (status(this) === "mounted") {
-                    const images = this.orderReceipt.el.getElementsByTagName("img");
-                    for (const image of images) {
-                        await image.decode();
-                    }
-                    await this.handleAutoPrint();
-                }
-            }, 0);
-        });
-
         onWillStart(async () => {
             // When the order is paid, if there is still a part of the order
             // to send in preparation it is automatically sent
@@ -55,7 +36,9 @@ export class ReceiptScreen extends AbstractReceiptScreen {
             }
         });
     }
-
+    get receiptData() {
+        return this.pos.get_order().getOrderReceiptEnv();
+    }
     _addNewOrder() {
         this.pos.add_new_order();
     }
@@ -113,28 +96,6 @@ export class ReceiptScreen extends AbstractReceiptScreen {
     get ticketScreen() {
         return { name: "TicketScreen" };
     }
-    whenClosing() {
-        this.orderDone();
-    }
-    /**
-     * This function is called outside the rendering call stack. This way,
-     * we don't block the displaying of ReceiptScreen when it is mounted; additionally,
-     * any error that can happen during the printing does not affect the rendering.
-     */
-    async handleAutoPrint() {
-        if (this._shouldAutoPrint()) {
-            const currentOrder = this.currentOrder;
-            await this.printReceipt();
-            if (
-                this.currentOrder &&
-                this.currentOrder === currentOrder &&
-                currentOrder._printed &&
-                this._shouldCloseImmediately()
-            ) {
-                this.whenClosing();
-            }
-        }
-    }
     orderDone() {
         this.pos.removeOrder(this.currentOrder);
         this._addNewOrder();
@@ -168,19 +129,6 @@ export class ReceiptScreen extends AbstractReceiptScreen {
             this.buttonPrintReceipt.el.className = "fa fa-print";
         }
     }
-    _shouldAutoPrint() {
-        return this.pos.config.iface_print_auto && !this.currentOrder._printed;
-    }
-    _shouldCloseImmediately() {
-        var invoiced_finalized = this.currentOrder.is_to_invoice()
-            ? this.currentOrder.finalized
-            : true;
-        return (
-            this.hardwareProxy.printer &&
-            this.pos.config.iface_print_skip_screen &&
-            invoiced_finalized
-        );
-    }
     async _sendReceiptToCustomer() {
         const printer = new BasePrinter();
         const receiptString = this.orderReceipt.el.firstChild;

addons/point_of_sale/static/src/app/screens/receipt_screen/receipt_screen.xml

@@ -34,7 +34,9 @@
                         </div>
                     </div>
                     <div class="pos-receipt-container bg-200 text-center overflow-auto" t-ref="order-receipt">
-                        <OrderReceipt order="currentOrder"/>
+                        <div class="d-inline-block m-3 p-3 border rounded bg-view text-start overflow-hidden">
+                            <t t-call="point_of_sale.OrderReceipt" />
+                        </div>
                     </div>
                 </div>
                 <t t-set="splittedOrder" t-value="this.currentOrder.originalSplittedOrder and !this.currentOrder.originalSplittedOrder.finalized"/>

addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.js

@@ -3,35 +3,26 @@
 import { usePos } from "@point_of_sale/app/store/pos_hook";
 import { AbstractReceiptScreen } from "@point_of_sale/app/screens/receipt_screen/abstract_receipt_screen";
 import { registry } from "@web/core/registry";
-import { OrderReceipt } from "@point_of_sale/app/screens/receipt_screen/receipt/receipt";
 
 export class ReprintReceiptScreen extends AbstractReceiptScreen {
     static template = "point_of_sale.ReprintReceiptScreen";
-    static components = { OrderReceipt };
     static storeOnOrder = false;
     setup() {
         super.setup();
         this.pos = usePos();
-        owl.onMounted(this.onMounted);
-    }
-    onMounted() {
-        this.printReceipt();
     }
+
     confirm() {
         this.pos.showScreen("TicketScreen", { reuseSavedUIState: true });
     }
-    async printReceipt() {
-        const { iface_print_skip_screen } = this.pos.config;
-        if (this.hardwareProxy.printer && iface_print_skip_screen) {
-            const result = await this._printReceipt();
-            if (result) {
-                this.pos.showScreen("TicketScreen", { reuseSavedUIState: true });
-            }
-        }
-    }
+
     async tryReprint() {
         await this._printReceipt();
     }
+
+    get receiptData() {
+        return this.pos.get_order().getOrderReceiptEnv();
+    }
 }
 
 registry.category("pos_screens").add("ReprintReceiptScreen", ReprintReceiptScreen);

addons/point_of_sale/static/src/app/screens/receipt_screen/reprint_receipt_screen.xml

@@ -16,7 +16,9 @@
                         <i class="fa fa-print ms-2"></i> Print Receipt
                     </button>
                     <div class="pos-receipt-container mt-2 bg-200 text-center overflow-y-auto" t-ref="order-receipt">
-                        <OrderReceipt order="props.order"/>
+                        <div class="d-inline-block m-3 p-3 border rounded bg-view text-start overflow-hidden">
+                            <t t-call="point_of_sale.OrderReceipt" />
+                        </div>
                     </div>
                 </div>
             </div>

addons/point_of_sale/static/src/app/screens/ticket_screen/reprint_receipt_button/reprint_receipt_button.js

@@ -2,17 +2,36 @@
 
 import { usePos } from "@point_of_sale/app/store/pos_hook";
 import { Component } from "@odoo/owl";
+import { renderToElement } from "@web/core/utils/render";
+import { useService } from "@web/core/utils/hooks";
+import { useAsyncLockedMethod } from "@point_of_sale/app/utils/hooks";
 
 export class ReprintReceiptButton extends Component {
     static template = "point_of_sale.ReprintReceiptButton";
 
     setup() {
         this.pos = usePos();
+        this.hardwareProxy = useService("hardware_proxy");
+        this.click = useAsyncLockedMethod(this.click);
     }
+
     async click() {
         if (!this.props.order) {
             return;
         }
-        this.pos.showScreen("ReprintReceiptScreen", { order: this.props.order });
+        if (this.hardwareProxy.printer) {
+            const orderReceipt = renderToElement("point_of_sale.OrderReceipt", {
+                receiptData: {
+                    ...this.pos.get_order().getOrderReceiptEnv(),
+                },
+                pos: this.pos,
+                env: this.env,
+            });
+
+            // Need to await to have the result in case of automatic skip screen.
+            await this.hardwareProxy.printer.printReceipt(orderReceipt);
+        } else {
+            this.pos.showScreen("ReprintReceiptScreen", { order: this.props.order });
+        }
     }
 }

addons/point_of_sale/static/src/app/store/models.js

@@ -819,6 +819,7 @@ export class Orderline extends PosModel {
             pack_lot_lines: this.get_lot_lines(),
             customer_note: this.get_customer_note(),
             taxed_lst_unit_price: this.get_taxed_lst_unit_price(),
+            isPartOfCombo: this.isPartOfCombo(),
             unitDisplayPriceBeforeDiscount: this.getUnitDisplayPriceBeforeDiscount(),
         };
     }
@@ -2666,9 +2667,15 @@ export class Order extends PosModel {
      */
     getOrderReceiptEnv() {
         // Formerly get_receipt_render_env defined in ScreenWidget.
+        const receipt = this.export_for_printing();
+        const isTaxIncluded = Math.abs(receipt.subtotal - receipt.total_with_tax) <= 0.000001;
+        const getOrderlineTaxes = (line) =>
+            Object.keys(line.tax_details).map((taxId) => this.pos.taxes_by_id[taxId]);
         return {
+            getOrderlineTaxes: getOrderlineTaxes,
+            isTaxIncluded: isTaxIncluded,
             order: this,
-            receipt: this.export_for_printing(),
+            receipt: receipt,
             orderlines: this.get_orderlines(),
             paymentlines: this.get_paymentlines(),
             shippingDate: this.shippingDate ? this._exportShippingDateForPrinting() : false,

addons/pos_loyalty/static/src/overrides/components/order_receipt/order_receipt.xml

@@ -3,15 +3,15 @@
 
     <t t-name="pos_coupon.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('pos-receipt')]//div[hasclass('before-footer')]" position="inside">
-            <t t-if='receipt.loyaltyStats'>
-                <t t-foreach="receipt.loyaltyStats" t-as="_loyaltyStat" t-key="_loyaltyStat.couponId">
+            <t t-if='receiptData.receipt.loyaltyStats'>
+                <t t-foreach="receiptData.receipt.loyaltyStats" t-as="_loyaltyStat" t-key="_loyaltyStat.couponId">
                     <!-- Show only if portal_visible. -->
                     <div t-if="_loyaltyStat.program.portal_visible" class='loyalty'>
                         <span class="pos-receipt-center-align">
                             <div>--------------------------------</div>
                             <br/>
                             <div t-esc='_loyaltyStat.program.name' class="pos-receipt-title" />
-                            <div t-esc='receipt.partner.name' />
+                            <div t-esc='receiptData.receipt.partner.name' />
                             <br />
                         </span>
                         <t t-if='_loyaltyStat.points.won'>
@@ -29,14 +29,14 @@
                     </div>
                 </t>
             </t>
-            <t t-if="receipt.new_coupon_info and receipt.new_coupon_info.length !== 0">
+            <t t-if="receiptData.receipt.new_coupon_info and receiptData.receipt.new_coupon_info.length !== 0">
                 <div class="pos-coupon-rewards">
                     <div>------------------------</div>
                     <br/>
                     <div>
                         Coupon Codes
                     </div>
-                    <t t-foreach="receipt.new_coupon_info" t-as="coupon_info" t-key="coupon_info.code">
+                    <t t-foreach="receiptData.receipt.new_coupon_info" t-as="coupon_info" t-key="coupon_info.code">
                         <div class="coupon-container">
                             <div style="font-size: 110%;">
                                 <t t-esc="coupon_info['program_name']"/>

addons/pos_mercury/static/src/app/screens/receipt_screen/receipt/order_receipt.xml

@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="pos_mercury.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
-        <xpath expr="//t[@t-foreach='receipt.paymentlines']" position="inside">
+        <xpath expr="//t[@t-foreach='receiptData.receipt.paymentlines']" position="inside">
             <t t-if="line.mercury_data">
                 <div class="pos-receipt-left-padding">
                     <span>APPROVAL CODE: </span>
@@ -13,7 +13,7 @@
             </t>
         </xpath>
         <xpath expr="//div[hasclass('pos-receipt-order-data')]" position="after">
-            <div t-if="hasPosMercurySignature">
+            <div t-if="receiptData.hasPosMercurySignature">
                 <br />
                 <div>CARDHOLDER WILL PAY CARD ISSUER</div>
                 <div>ABOVE AMOUNT PURSUANT</div>

addons/pos_mercury/static/src/app/screens/receipt_screen/receipt_screen.js

@@ -0,0 +1,18 @@
+/** @odoo-module */
+
+import { ReceiptScreen } from "@point_of_sale/app/screens/receipt_screen/receipt_screen";
+import { patch } from "@web/core/utils/patch";
+
+patch(ReceiptScreen.prototype, {
+    get receiptData() {
+        const receiptData = super.receiptData;
+
+        receiptData.hasPosMercurySignature = receiptData.paymentlines.some((line) => {
+            if (line.mercury_data) {
+                return true;
+            }
+        });
+
+        return receiptData;
+    },
+});

addons/pos_mercury/static/src/overrides/components/order_receipt/order_receipt.js

@@ -1,19 +0,0 @@
-/** @odoo-module */
-
-import { OrderReceipt } from "@point_of_sale/app/screens/receipt_screen/receipt/receipt";
-import { patch } from "@web/core/utils/patch";
-
-patch(OrderReceipt.prototype, {
-    /**
-     * The receipt has signature if one of the paymentlines
-     * is paid with mercury.
-     */
-    get hasPosMercurySignature() {
-        for (const line of this.paymentlines) {
-            if (line.mercury_data) {
-                return true;
-            }
-        }
-        return false;
-    },
-});

addons/pos_restaurant/static/src/app/bill_screen/bill_screen.js

@@ -9,9 +9,6 @@ export class BillScreen extends ReceiptScreen {
         this.props.resolve({ confirmed: true, payload: null });
         this.pos.closeTempScreen();
     }
-    whenClosing() {
-        this.confirm();
-    }
     /**
      * @override
      */
@@ -19,6 +16,14 @@ export class BillScreen extends ReceiptScreen {
         await super.printReceipt();
         this.currentOrder._printed = false;
     }
+
+    get isBill() {
+        return true;
+    }
+
+    get receiptData() {
+        return this.pos.get_order().getOrderReceiptEnv();
+    }
 }
 
 registry.category("pos_screens").add("BillScreen", BillScreen);

addons/pos_restaurant/static/src/app/bill_screen/bill_screen.xml

@@ -20,7 +20,9 @@
                         <span>Print</span>
                     </div>
                     <div class="pos-receipt-container text-center" t-ref="order-receipt">
-                        <OrderReceipt order="currentOrder" isBill="true"/>
+                        <div class="d-inline-block m-3 p-3 border rounded bg-view text-start overflow-hidden">
+                            <t t-call="point_of_sale.OrderReceipt" />
+                        </div>
                     </div>
                 </div>
             </div>

addons/pos_restaurant/static/src/app/control_buttons/print_bill_button/print_bill_button.js

@@ -3,13 +3,19 @@
 import { usePos } from "@point_of_sale/app/store/pos_hook";
 import { ProductScreen } from "@point_of_sale/app/screens/product_screen/product_screen";
 import { Component } from "@odoo/owl";
+import { renderToElement } from "@web/core/utils/render";
+import { useService } from "@web/core/utils/hooks";
+import { useAsyncLockedMethod } from "@point_of_sale/app/utils/hooks";
 
 export class PrintBillButton extends Component {
     static template = "pos_restaurant.PrintBillButton";
 
     setup() {
         this.pos = usePos();
+        this.hardwareProxy = useService("hardware_proxy");
+        this.click = useAsyncLockedMethod(this.click);
     }
+
     _isDisabled() {
         const order = this.pos.get_order();
         if (!order) {
@@ -17,8 +23,22 @@ export class PrintBillButton extends Component {
         }
         return order.get_orderlines().length === 0;
     }
-    click() {
-        this.pos.showTempScreen("BillScreen");
+
+    async click() {
+        if (this.hardwareProxy.printer) {
+            const orderReceipt = renderToElement("point_of_sale.OrderReceipt", {
+                receiptData: {
+                    ...this.pos.get_order().getOrderReceiptEnv(),
+                },
+                pos: this.pos,
+                env: this.env,
+            });
+
+            // Need to await to have the result in case of automatic skip screen.
+            await this.hardwareProxy.printer.printReceipt(orderReceipt);
+        } else {
+            this.pos.showTempScreen("BillScreen");
+        }
     }
 }
 

addons/pos_restaurant/static/src/overrides/components/receipt_screen/order_receipt/order_receipt.xml

@@ -3,42 +3,42 @@
 
     <t t-name="pos_restaurant.OrderReceipt" t-inherit="point_of_sale.OrderReceipt" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('pos-receipt-order-data')]" position="inside">
-            <t t-if="props.isBill">
+            <t t-if="isBill">
                 <div>PRO FORMA</div>
             </t>
         </xpath>
         <xpath expr="//div[hasclass('receipt-change')]" position="attributes">
-            <attribute name="t-if">!props.isBill</attribute>
+            <attribute name="t-if">!isBill</attribute>
         </xpath>
         <xpath expr="//div[hasclass('cashier')]" position="after">
-            <t t-if="receipt.table">
-                at table <t t-esc="receipt.table" />
+            <t t-if="receiptData.receipt.table">
+                at table <t t-esc="receiptData.receipt.table" />
             </t>
-            <t t-if="receipt.table and receipt.customer_count">
-                <div>Guests: <t t-esc="receipt.customer_count" /></div>
+            <t t-if="receiptData.receipt.table and receiptData.receipt.customer_count">
+                <div>Guests: <t t-esc="receiptData.receipt.customer_count" /></div>
             </t>
         </xpath>
         <xpath expr="//div[hasclass('before-footer')]" position="after">
-            <t t-if="props.isBill and pos.config.set_tip_after_payment">
+            <t t-if="isBill and pos.config.set_tip_after_payment">
                 <div class="tip-form py-3">
                     <div class="title text-center mt-3">For convenience, we are providing the following gratuity calculations:</div>
                     <div class="percentage-options percentage-options d-flex flex-nowrap mt-3">
                         <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>15%</div>
                             <div class="amount">
-                                <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.15)"></t>
+                                <t t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax * 0.15)"></t>
                             </div>
                         </div>
                         <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>20%</div>
                             <div class="amount">
-                                <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.20)"></t>
+                                <t t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax * 0.20)"></t>
                             </div>
                         </div>
                         <div class="option d-flex flex-column flex-nowrap align-items-center justify-content-center flex-grow-1">
                             <div>25%</div>
                             <div class="amount">
-                                <t t-esc="env.utils.formatCurrency(receipt.total_with_tax * 0.25)"></t>
+                                <t t-esc="env.utils.formatCurrency(receiptData.receipt.total_with_tax * 0.25)"></t>
                             </div>
                         </div>
                     </div>

addons/pos_self_order/static/src/common/self_order_service.js

@@ -9,7 +9,7 @@ import { getColor } from "@web/core/colors/colors";
 import { categorySorter } from "@pos_self_order/common/utils";
 
 export class selfOrderCommon extends Reactive {
-    async setup(env, rpc, notification, router, bus_service, cookie) {
+    async setup(env, { rpc, notification, router, bus_service, cookie, multi_tab }) {
         // services
         this.env = env;
         this.router = router;
@@ -17,6 +17,7 @@ export class selfOrderCommon extends Reactive {
         this.notification = notification;
         this.bus_service = bus_service;
         this.cookie = cookie;
+        this.multi_tab = multi_tab;
 
         // data
         Object.assign(this, {

addons/pos_self_order/static/src/kiosk/self_order_kiosk_service.js

@@ -97,7 +97,7 @@ export class selfOrder extends selfOrderCommon {
 export const selfOrderService = {
     dependencies: ["rpc", "notification", "router", "bus_service", "cookie"],
     async start(env, { rpc, notification, router, bus_service, cookie }) {
-        return new selfOrder(env, rpc, notification, router, bus_service, cookie).ready;
+        return new selfOrder(env, { rpc, notification, router, bus_service, cookie }).ready;
     },
 };
 

addons/pos_self_order/static/src/mobile/self_order_mobile_service.js

@@ -208,7 +208,7 @@ export class SelfOrder extends selfOrderCommon {
 export const selfOrderService = {
     dependencies: ["rpc", "notification", "router"],
     async start(env, { rpc, notification, router }) {
-        return new SelfOrder(env, rpc, notification, router).ready;
+        return new SelfOrder(env, { rpc, notification, router }).ready;
     },
 };