[REF] pos, pos_*: Change Escpos' XML to HTML

Receipt are now printed as JPGs so receipts need to be formatted as
classic HTML to be rendered as images by Wkhtmltoimage.

There were two versions of the receipt for an order. The one in XML,
to be printed, and the one in HTML, that was displayed in the POS.
Since both of them are now HTML, we can remove one of them.

TaskID: 1939455

11 files changed, 300 insertions, 412 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 603539760dd..ee107136876 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -1437,41 +1437,19 @@ td {
     direction: ltr;
 }
 
-.pos .pos-sale-ticket {
+.pos .pos-receipt-container > div {
     text-align: left;
     width: 300px;
     background-color: white;
     margin: 20px;
     padding: 15px;
-    font-size: 14px;
+    font-size: 16px;
     padding-bottom:30px;
     display: inline-block;
-    font-family: "Inconsolata";
     border: solid 1px rgb(220,220,220);
     border-radius: 3px;
     overflow: hidden;
 }
-.pos .pos-sale-ticket pre{
-    font-family: "Inconsolata";
-}
-.pos .pos-sale-ticket .emph{
-    font-size: 20px;
-    margin:5px;
-}
-.pos .pos-sale-ticket table {
-    width: 100%;
-    border: 0;
-    table-layout: fixed;
-}
-.pos .pos-sale-ticket table td {
-    border: 0;
-    word-wrap: break-word;
-}
-
-.pos-receipts {
-    height: 0;
-    overflow: hidden;
-}
 
 @page {
     margin: 0;
@@ -1536,7 +1514,7 @@ td {
         box-shadow: none !important;
         background: transparent !important;
     }
-    .pos .pos-sale-ticket{
+    .pos .pos-receipt{
         margin: 0;
         margin-left: auto !important;
         margin-right: auto !important;
@@ -1544,6 +1522,9 @@ td {
         font-size: 13px !important;
         width: 266px !important;
     }
+    .pos .pos-receipts{
+        display: none !important;
+    }
     .o_debug_manager {
         display: none !important;
     }
diff --git a/addons/point_of_sale/static/src/css/pos_receipts.css b/addons/point_of_sale/static/src/css/pos_receipts.css
new file mode 100644
index 00000000000..2c6d1fc18d0
--- /dev/null
+++ b/addons/point_of_sale/static/src/css/pos_receipts.css
@@ -0,0 +1,64 @@
+.pos-receipt-print {
+    width: 512px;
+    font-size: 28px;
+    padding-bottom: 2em;
+    color: #000000;
+}
+
+.pos-receipt .pos-receipt-right-align {
+    float: right;
+}
+
+.pos-receipt .pos-receipt-center-align {
+    text-align: center;
+}
+
+.pos-receipt .pos-receipt-left-padding {
+    padding-left: 2em;
+}
+
+.pos-receipt .pos-receipt-logo {
+    width: 50%;
+    display: block;
+    margin: 0 auto;
+}
+
+.pos-receipt .pos-receipt-contact {
+    text-align: center;
+    font-size: 75%;
+}
+
+.pos-receipt .pos-receipt-order-data {
+    text-align: center;
+    font-size: 75%;
+}
+
+.pos-receipt .pos-receipt-amount {
+    font-size: 125%;
+    padding-left: 6em;
+}
+
+.pos-receipt .pos-receipt-title {
+    font-weight: bold;
+    font-size: 125%;
+    text-align: center;
+}
+
+.pos-receipt .pos-receipt-header {
+    font-size: 125%;
+    text-align: center;
+}
+
+.pos-receipt .pos-order-receipt-cancel {
+    color: red;
+}
+
+.pos-receipts {
+    height: 0;
+    overflow: hidden;
+}
+
+.pos-payment-terminal-receipt {
+    text-align: center;
+    font-size: 75%;
+}
diff --git a/addons/point_of_sale/static/src/js/models.js b/addons/point_of_sale/static/src/js/models.js
index 1cea3a6c9ce..adbbded114a 100644
--- a/addons/point_of_sale/static/src/js/models.js
+++ b/addons/point_of_sale/static/src/js/models.js
@@ -2281,12 +2281,12 @@ exports.Order = Backbone.Model.extend({
         var company = this.pos.company;
         var date    = new Date();
 
-        function is_xml(subreceipt){
+        function is_html(subreceipt){
             return subreceipt ? (subreceipt.split('\n')[0].indexOf('<!DOCTYPE QWEB') >= 0) : false;
         }
 
-        function render_xml(subreceipt){
-            if (!is_xml(subreceipt)) {
+        function render_html(subreceipt){
+            if (!is_html(subreceipt)) {
                 return subreceipt;
             } else {
                 subreceipt = subreceipt.split('\n').slice(1).join('\n');
@@ -2343,16 +2343,16 @@ exports.Order = Backbone.Model.extend({
             currency: this.pos.currency,
         };
 
-        if (is_xml(this.pos.config.receipt_header)){
+        if (is_html(this.pos.config.receipt_header)){
             receipt.header = '';
-            receipt.header_xml = render_xml(this.pos.config.receipt_header);
+            receipt.header_html = render_html(this.pos.config.receipt_header);
         } else {
             receipt.header = this.pos.config.receipt_header || '';
         }
 
-        if (is_xml(this.pos.config.receipt_footer)){
+        if (is_html(this.pos.config.receipt_footer)){
             receipt.footer = '';
-            receipt.footer_xml = render_xml(this.pos.config.receipt_footer);
+            receipt.footer_html = render_html(this.pos.config.receipt_footer);
         } else {
             receipt.footer = this.pos.config.receipt_footer || '';
         }
diff --git a/addons/point_of_sale/static/src/js/screens.js b/addons/point_of_sale/static/src/js/screens.js
index aeae2a4a9a6..377b93f4312 100644
--- a/addons/point_of_sale/static/src/js/screens.js
+++ b/addons/point_of_sale/static/src/js/screens.js
@@ -1669,8 +1669,8 @@ var ReceiptScreenWidget = ScreenWidget.extend({
         }
         this.pos.get_order()._printed = true;
     },
-    print_xml: function() {
-        var receipt = QWeb.render('XmlReceipt', this.get_receipt_render_env());
+    print_html: function () {
+        var receipt = QWeb.render('OrderReceipt', this.get_receipt_render_env());
 
         this.pos.proxy.printer.print_receipt(receipt);
         this.pos.get_order()._printed = true;
@@ -1703,8 +1703,8 @@ var ReceiptScreenWidget = ScreenWidget.extend({
             }, 1000);
 
             this.print_web();
-        } else {    // proxy (xml) printing
-            this.print_xml();
+        } else {    // proxy (html) printing
+            this.print_html();
             this.lock_screen(false);
         }
     },
@@ -1761,7 +1761,7 @@ var ReceiptScreenWidget = ScreenWidget.extend({
         }
     },
     render_receipt: function() {
-        this.$('.pos-receipt-container').html(QWeb.render('PosTicket', this.get_receipt_render_env()));
+        this.$('.pos-receipt-container').html(QWeb.render('OrderReceipt', this.get_receipt_render_env()));
     },
 });
 gui.define_screen({name:'receipt', widget: ReceiptScreenWidget});
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index fb5087a172c..a1cf3607752 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -748,25 +748,25 @@
         </div>
     </t>
 
-    <t t-name="XmlReceiptWrappedProductNameLines">
+    <t t-name="OrderReceiptWrappedProductNameLines">
         <t t-foreach="line.product_name_wrapped.slice(1)" t-as="wrapped_line">
-            <line>
-                <left><t t-esc="wrapped_line"/></left>
-            </line>
+            <t t-esc="wrapped_line"/>
         </t>
     </t>
 
-    <t t-name="XmlReceipt">
-        <receipt align='center' width='40' value-thousands-separator='' >
+    <t t-name="OrderReceipt">
+        <div class="pos-receipt">
             <t t-if='receipt.company.logo'>
-                <img t-att-src='receipt.company.logo' alt="Logo"/>
+                <img class="pos-receipt-logo" t-att-src='receipt.company.logo' alt="Logo"/>
                 <br/>
             </t>
             <t t-if='!receipt.company.logo'>
-                <h1><t t-esc='receipt.company.name' /></h1>
+                <h2 class="pos-receipt-center-align">
+                    <t t-esc='receipt.company.name' />
+                </h2>
                 <br/>
             </t>
-            <div font='b'>
+            <div class="pos-receipt-contact">
                 <t t-if='receipt.company.contact_address'>
                     <div><t t-esc='receipt.company.contact_address' /></div>
                 </t>
@@ -782,10 +782,10 @@
                 <t t-if='receipt.company.website'>
                     <div><t t-esc='receipt.company.website' /></div>
                 </t>
-                <t t-if='receipt.header_xml'>
-                    <t t-raw='receipt.header_xml' />
+                <t t-if='receipt.header_html'>
+                    <t t-raw='receipt.header_html' />
                 </t>
-                <t t-if='!receipt.header_xml and receipt.header'>
+                <t t-if='!receipt.header_html and receipt.header'>
                     <div><t t-esc='receipt.header' /></div>
                 </t>
                 <t t-if='receipt.cashier'>
@@ -799,69 +799,50 @@
 
             <!-- Orderlines -->
 
-            <div class='orderlines' line-ratio='0.6'>
+            <div class='orderlines'>
                 <t t-foreach='receipt.orderlines' t-as='line'>
                     <t t-set='simple' t-value='(line.discount === 0 and line.unit_name === "Units" and line.quantity === 1 and !discount_to_show and !(line.display_discount_policy == "without_discount" &amp;&amp; line.price != line.price_lst))' />
                     <t t-if='simple'>
-                        <line>
-                            <left><t t-esc='line.product_name_wrapped[0]' /></left>
-                            <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='line.price_display' /></value></right>
-                        </line>
-                        <t t-call="XmlReceiptWrappedProductNameLines"/>
+                        <div>
+                            <t t-esc='line.product_name_wrapped[0]' />
+                            <span t-esc='widget.format_currency_no_symbol(line.price_display)' class="price_display pos-receipt-right-align"/>
+                        </div>
+                        <t t-call="OrderReceiptWrappedProductNameLines"/>
                     </t>
                     <t t-if='!simple'>
-                        <line><left><t t-esc='line.product_name_wrapped[0]' /></left></line>
-                        <t t-call="XmlReceiptWrappedProductNameLines"/>
+                        <div t-esc='line.product_name_wrapped[0]'/>
+                        <t t-call="OrderReceiptWrappedProductNameLines"/>
                         <t t-if="line.display_discount_policy == 'without_discount' &amp;&amp; line.price != line.price_lst">
-                            <line indent='1'>
-                                <left>
-                                    <value t-att-value-decimals='pos.dp["Product Price"]'>
-                                        <t t-esc="line.price_lst" />
-                                    </value> ->
-                                    <value t-att-value-decimals='pos.dp["Product Price"]'>
-                                        <t t-esc="line.price" />
-                                    </value>
-                                </left>
-                            </line>
+                            <div class="pos-receipt-left-padding">
+                                <t t-esc="widget.format_currency_no_symbol(line.price_lst)" /> 
+                                ->
+                                <t t-esc="widget.format_currency_no_symbol(line.price)" />
+                            </div>
                         </t>
                         <t t-elif='line.discount !== 0'>
-                            <line indent='1'>
-                                <left>
-                                    <value t-att-value-decimals='pos.dp["Product Price"]'>
-                                        <t t-if="pos.config.iface_tax_included === 'total'">
-                                            <t t-esc="line.price_with_tax_before_discount" />
-                                        </t>
-                                        <t t-else="">
-                                            <t t-esc="line.price_lst" />
-                                        </t>
-                                    </value>
-                                </left>
-                            </line>
+                            <div class="pos-receipt-left-padding">
+                                <t t-if="pos.config.iface_tax_included === 'total'">
+                                    <t t-esc="widget.format_currency_no_symbol(line.price_with_tax_before_discount)"/>
+                                </t>
+                                <t t-else="">
+                                    <t t-esc="widget.format_currency_no_symbol(line.price_lst)"/>
+                                </t>
+                            </div>
                         </t>
                         <t t-if='line.discount !== 0'>
-                            <line indent='1'>
-                                <left>
-                                    Discount: <t t-esc='line.discount' />%
-                                </left>
-                            </line>
+                            <div class="pos-receipt-left-padding">
+                                Discount: <t t-esc='line.discount' />%
+                            </div>
                         </t>
-                        <line indent='1'>
-                            <left>
-                                <value t-att-value-decimals='pos.dp["Product Unit of Measure"]' value-autoint='on'>
-                                    <t t-esc='line.quantity' />
-                                </value>
-                                <t t-if='line.unit_name !== "Units"'>
-                                    <t t-esc='line.unit_name' />
-                                </t>
-                                x
-                                <value t-att-value-decimals='pos.dp["Product Price"]'>
-                                    <t t-esc='line.price_display_one' />
-                                </value>
-                            </left>
-                            <right>
-                                <value t-att-value-decimals='pos.currency.decimals'><t t-esc='line.price_display' /></value>
-                            </right>
-                        </line>
+                        <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.unit_name !== "Units"' t-esc='line.unit_name'/>
+                            x
+                            <t t-esc='widget.format_currency_no_symbol(line.price_display_one)' />
+                            <span class="price_display pos-receipt-right-align">
+                                <t t-esc='widget.format_currency_no_symbol(line.price_display)'/>
+                            </span>
+                        </div>
                     </t>
                 </t>
             </div>
@@ -870,168 +851,160 @@
 
             <t t-set='taxincluded' t-value='Math.abs(receipt.subtotal - receipt.total_with_tax) &lt;= 0.000001' />
             <t t-if='!taxincluded'>
-                <line><right>--------</right></line>
-                <line><left>Subtotal</left><right><value t-att-value-decimals='pos.currency.decimals'><t t-esc="receipt.subtotal" /></value></right></line>
+                <div class="pos-receipt-right-align">--------</div>
+                <br/>
+                <div>Subtotal<span t-esc='widget.format_currency_no_symbol(receipt.subtotal)' class="pos-receipt-right-align"/></div>
                 <t t-foreach='receipt.tax_details' t-as='tax'>
-                    <line>
-                        <left><t t-esc='tax.name' /></left>
-                        <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='tax.amount' /></value></right>
-                    </line>
+                    <div>
+                        <t t-esc='tax.name' />
+                        <span t-esc='widget.format_currency_no_symbol(tax.amount)' class="pos-receipt-right-align"/>
+                    </div>
                 </t>
             </t>
 
             <!-- Total -->
-
-            <line><right>--------</right></line>
-            <line class='total' size='double-height'>
-                <left><pre>        TOTAL</pre></left>
-                <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='receipt.total_with_tax' /></value></right>
-            </line>
+            <div class="pos-receipt-right-align">--------</div>
+            <br/>
+            <div class="pos-receipt-amount">
+                TOTAL
+                <span t-esc='widget.format_currency_no_symbol(receipt.total_with_tax)' class="pos-receipt-right-align"/>
+            </div>
             <br/><br/>
 
             <!-- Payment Lines -->
 
             <t t-foreach='paymentlines' t-as='line'>
-                <line>
-                    <left><t t-esc='line.name' /></left>
-                    <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='line.get_amount()'/></value></right>
-                </line>
+                <div>
+                    <t t-esc='line.name' />
+                    <span t-esc='widget.format_currency_no_symbol(line.get_amount())' class="pos-receipt-right-align"/>
+                </div>
             </t>
             <br/>
 
-            <line size='double-height'>
-                <left><pre>        CHANGE</pre></left>
-                <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='receipt.change' /></value></right>
-            </line>
+            <div class="pos-receipt-amount">
+                CHANGE
+                <span t-esc='widget.format_currency_no_symbol(receipt.change)' class="pos-receipt-right-align"/>
+            </div>
             <br/>
 
             <!-- Extra Payment Info -->
 
             <t t-if='receipt.total_discount'>
-                <line>
-                    <left>Discounts</left>
-                    <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='receipt.total_discount'/></value></right>
-                </line>
+                <div>
+                    Discounts
+                    <span t-esc='widget.format_currency_no_symbol(receipt.total_discount)' class="pos-receipt-right-align"/>
+                </div>
             </t>
             <t t-if='taxincluded'>
                 <t t-foreach='receipt.tax_details' t-as='tax'>
-                    <line>
-                        <left><t t-esc='tax.name' /></left>
-                        <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='tax.amount' /></value></right>
-                    </line>
+                    <div>
+                        <t t-esc='tax.name' />
+                        <span t-esc='widget.format_currency_no_symbol(tax.amount)' class="pos-receipt-right-align"/>
+                    </div>
                 </t>
-                <line>
-                    <left>Total Taxes</left>
-                    <right><value t-att-value-decimals='pos.currency.decimals'><t t-esc='receipt.total_tax'/></value></right>
-                </line>
+                <div>
+                    Total Taxes
+                    <span t-esc='widget.format_currency_no_symbol(receipt.total_tax)' class="pos-receipt-right-align"/>
+                </div>
             </t>
 
             <div class='before-footer' />
 
             <!-- Footer -->
-            <t t-if='receipt.footer_xml'>
-                <t t-raw='receipt.footer_xml' />
-            </t>
+            <div t-if='receipt.footer_html'  class="pos-receipt-center-align">
+                <t t-raw='receipt.footer_html'/>
+            </div>
 
-            <t t-if='!receipt.footer_xml and receipt.footer'>
+            <div t-if='!receipt.footer_html and receipt.footer'  class="pos-receipt-center-align">
                 <br/>
-                <t t-esc='receipt.footer' />
+                <t t-esc='receipt.footer'/>
                 <br/>
                 <br/>
-            </t>
+            </div>
 
             <div class='after-footer' />
 
             <br/>
-            <div font='b'>
+            <div class="pos-receipt-order-data">
                 <div><t t-esc='receipt.name' /></div>
                 <div><t t-esc='receipt.date.localestring' /></div>
             </div>
 
-        </receipt>
+        </div>
     </t>
 
     <t t-name="SaleDetailsReport">
-        <receipt align='center' width='40' value-thousands-separator='' >
+        <div class="pos-receipt">
             <t t-if='pos.company_logo_base64'>
-                <img t-att-src='pos.company_logo_base64' alt="Logo"/>
+                <img class="pos-receipt-logo" t-att-src='pos.company_logo_base64' alt="Logo"/>
                 <br/>
             </t>
-            <t t-if='!pos.company_logo_base64'>
-                <h1><t t-esc='company.name' /></h1>
+            <t t-if='!pos.company_logo_base64' class="pos-receipt-center-align">
+                <h1 t-esc='company.name' />
                 <br/>
             </t>
             <br /><br />
 
             <!-- Orderlines -->
 
-            <div class='orderlines' line-ratio='0.6'>
+            <div class='orderlines'>
                 <t t-foreach='products' t-as='line'>
-                    <line>
-                        <left><t t-esc='line.product_name.substr(0,20)' /></left>
-                        <right>
-                            <value value-decimals='2' value-autoint='on'>
-                                <t t-esc='line.quantity' />
-                            </value>
+                    <div>
+                        <t t-esc='line.product_name.substr(0,20)' />
+                        <span class="pos-receipt-right-align">
+                            <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.uom !== "Units"'>
                                 <t t-esc='line.uom' />
                             </t>
-                        </right>
-                        <right>
-                            <value><t t-esc='line.price_unit' /></value>
-                        </right>
-                    </line>
+                            x
+                            <t t-esc='widget.format_currency_no_symbol(line.price_unit)' />
+                        </span>
+                    </div>
                     <t t-if='line.discount !== 0'>
-                        <line indent='1'><left>Discount: <t t-esc='line.discount' />%</left></line>
+                        <div class="pos-receipt-left-padding">Discount: <t t-esc='line.discount' />%</div>
                     </t>
                 </t>
             </div>
 
             <br/>
-            <line><left>------------------------</left></line>
+            <div>------------------------</div>
             <br/>
 
-            <line>
-                <left>Payments:</left>
-            </line>
-            <line t-foreach='payments' t-as='payment'>
-                <left><t t-esc='payment.name' /></left>
-                <right>
-                    <t t-esc='widget.format_currency_no_symbol(payment.total)'/>
-                </right>
-            </line>
+            <div>
+                Payments:
+            </div>
+            <div t-foreach='payments' t-as='payment'>
+                <t t-esc='payment.name'/>
+                <span t-esc='widget.format_currency_no_symbol(payment.total)' class="pos-receipt-right-align"/>
+            </div>
 
             <br/>
-            <line><left>------------------------</left></line>
+            <div>------------------------</div>
             <br/>
 
-            <line>
-                <left>Taxes:</left>
-            </line>
-            <line t-foreach='taxes' t-as='taxe'>
-                <left><t t-esc='taxe.name' /></left>
-                <right>
-                    <t t-esc='widget.format_currency_no_symbol(taxe.tax_amount)'/>
-                </right>
-            </line>
+            <div>
+                Taxes:
+            </div>
+            <div t-foreach='taxes' t-as='taxe'>
+                <t t-esc='taxe.name'/>
+                <span t-esc='widget.format_currency_no_symbol(taxe.tax_amount)' class="pos-receipt-right-align"/>
+            </div>
 
             <br/>
-            <line><left>------------------------</left></line>
+            <div>------------------------</div>
             <br/>
 
-            <line>
-                <left>Total:</left>
-                <right>
-                    <t t-esc='widget.format_currency_no_symbol(total_paid)'/>
-                </right>
-            </line>
+            <div>
+                Total:
+                <span t-esc='widget.format_currency_no_symbol(total_paid)' class="pos-receipt-right-align"/>
+            </div>
 
             <br/>
-            <div font='b'>
+            <div class="pos-receipt-order-data">
                 <div><t t-esc='date' /></div>
             </div>
 
-        </receipt>
+        </div>
     </t>
 
 
@@ -1509,116 +1482,6 @@
         </span>
     </t>
 
-    <t t-name="PosTicket">
-        <div class="pos-sale-ticket">
-
-            <div class="pos-center-align"><t t-esc="order.formatted_validation_date"/> <t t-esc="order.name"/></div>
-            <br />
-            <t t-esc="widget.pos.company.name"/><br />
-            <div class="receipt-phone">
-                Phone: <t t-esc="widget.pos.company.phone || ''"/><br />
-            </div>
-            <div class="receipt-user">
-                User: <t t-esc="widget.pos.get_cashier().name"/><br />
-            </div>
-            <br />
-            <t t-if="receipt.header">
-                <div style='text-align:center'>
-                    <t t-esc="receipt.header" />
-                </div>
-                <br />
-            </t>
-            <table class='receipt-orderlines'>
-                <colgroup>
-                    <col width='50%' />
-                    <col width='25%' />
-                    <col width='25%' />
-                </colgroup>
-                <tr t-foreach="orderlines" t-as="orderline">
-                    <td>
-                        <t t-esc="orderline.get_product().display_name"/>
-                        <t t-if="orderline.display_discount_policy() == 'without_discount' &amp;&amp; 
-                            orderline.get_unit_display_price() != orderline.get_lst_price()">
-                            <div class="pos-disc-font">
-                                <s>
-                                    <t t-esc="widget.format_currency(orderline.get_lst_price(),'Product Price')"/>
-                                </s> ->
-                                <t t-esc="widget.format_currency(orderline.get_unit_display_price(),'Product Price')"/>
-                            </div>
-                        </t>
-                         <t t-if="orderline.get_discount() > 0">
-                            <div class="pos-disc-font">
-                                With a <t t-esc="orderline.get_discount()"/>% discount
-                            </div>
-                        </t>
-                    </td>
-                    <td class="pos-right-align">
-                        <t t-esc="orderline.get_quantity_str_with_unit()"/>
-                    </td>
-                    <td class="pos-right-align">
-                        <t t-esc="widget.format_currency(orderline.get_display_price())"/>
-                    </td>
-                </tr>
-            </table>
-            <br />
-            <table class='receipt-total'>
-                <tr>
-                    <td>Subtotal:</td>
-                    <td class="pos-right-align">
-                        <t t-esc="widget.format_currency(order.get_total_without_tax())"/>
-                    </td>
-                </tr>
-                <t t-foreach="order.get_tax_details()" t-as="taxdetail">
-                    <tr>
-                        <td><t t-esc="taxdetail.name" /></td>
-                        <td class="pos-right-align">
-                            <t t-esc="widget.format_currency(taxdetail.amount)" />
-                        </td>
-                    </tr>
-                </t>
-                <tr>
-                    <t t-if="order.get_total_discount() > 0">
-                        <td>Discount:</td>
-                        <td class="pos-right-align">
-                            <t t-esc="widget.format_currency(order.get_total_discount())"/>
-                        </td>
-                    </t>
-                </tr>
-                <tr class="emph">
-                    <td>Total:</td>
-                    <td class="pos-right-align">
-                        <t t-esc="widget.format_currency(order.get_total_with_tax())"/>
-                    </td>
-                </tr>
-            </table>
-            <br />
-            <table class='receipt-paymentlines'>
-                <t t-foreach="paymentlines" t-as="line">
-                  <tr>
-                      <td>
-                          <t t-esc="line.name"/>
-                      </td>
-                      <td class="pos-right-align">
-                          <t t-esc="widget.format_currency(line.get_amount())"/>
-                      </td>
-                  </tr>
-                </t>
-            </table>
-            <br />
-            <table class='receipt-change'>
-                <tr><td>Change:</td><td class="pos-right-align">
-                    <t t-esc="widget.format_currency(order.get_change())"/>
-                    </td></tr>
-            </table>
-            <t t-if="receipt.footer">
-                <br />
-                <div style='text-align:center'>
-                    <t t-esc="receipt.footer" />
-                </div>
-            </t>
-        </div>
-    </t>
-
     <!-- Onscreen Keyboard :
          http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ -->
     <t t-name="OnscreenKeyboardFull">
diff --git a/addons/point_of_sale/views/point_of_sale.xml b/addons/point_of_sale/views/point_of_sale.xml
index ea43ba2b4e9..a38a6997095 100644
--- a/addons/point_of_sale/views/point_of_sale.xml
+++ b/addons/point_of_sale/views/point_of_sale.xml
@@ -5,6 +5,7 @@
             <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
             <link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
             <link rel="stylesheet" href="/point_of_sale/static/src/css/keyboard.css"/>
+            <link rel="stylesheet" href="/point_of_sale/static/src/css/pos_receipts.css"/>
 
             <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fontawesome_overridden.scss"/>
 
diff --git a/addons/pos_mercury/static/src/xml/pos_mercury.xml b/addons/pos_mercury/static/src/xml/pos_mercury.xml
index 049777b49b8..a40973f7c30 100644
--- a/addons/pos_mercury/static/src/xml/pos_mercury.xml
+++ b/addons/pos_mercury/static/src/xml/pos_mercury.xml
@@ -53,12 +53,12 @@
     </t>
   </t>
 
-  <t t-extend="XmlReceipt">
+  <t t-extend="OrderReceipt">
     <t t-jquery="t[t-foreach*='paymentlines'][t-as*='line']" t-operation="append">
       <t t-if="line.mercury_data">
-        <line line-ratio="1">
-          <left><pre>  APPROVAL CODE:</pre><t t-esc="line.mercury_auth_code"/></left>
-        </line>
+        <div class="pos-receipt-left-padding">
+          APPROVAL CODE: <t t-esc="line.mercury_auth_code"/>
+        </div>
       </t>
     </t>
     <t t-jquery="receipt" t-operation="append">
@@ -68,20 +68,4 @@
     </t>
   </t>
 
-  <t t-extend="PosTicket">
-    <t t-jquery="t[t-foreach*='paymentlines'][t-as*='line']" t-operation="append">
-      <tr>
-        <td colspan="2">
-          <t t-if="line.mercury_data">
-            &amp;nbsp;&amp;nbsp;APPROVAL CODE: <t t-esc="line.mercury_auth_code"/>
-          </t>
-        </td>
-      </tr>
-    </t>
-    <t t-jquery="t[t-if*='receipt.footer']" t-operation="after">
-      <div class="pos-center-align">
-        <t t-call="PosMercurySignature"/>
-      </div>
-    </t>
-  </t>
 </templates>
diff --git a/addons/pos_restaurant/static/src/js/printbill.js b/addons/pos_restaurant/static/src/js/printbill.js
index ba6c3ada734..233e25c757f 100644
--- a/addons/pos_restaurant/static/src/js/printbill.js
+++ b/addons/pos_restaurant/static/src/js/printbill.js
@@ -29,7 +29,7 @@ gui.define_screen({name:'bill', widget: BillScreenWidget});
 
 var PrintBillButton = screens.ActionButtonWidget.extend({
     template: 'PrintBillButton',
-    print_xml: function(){
+    print_html: function(){
         var order = this.pos.get('selectedOrder');
         if(order.get_orderlines().length > 0){
             var receipt = order.export_for_printing();
@@ -43,7 +43,7 @@ var PrintBillButton = screens.ActionButtonWidget.extend({
         if (!this.pos.config.iface_print_via_proxy) {
             this.gui.show_screen('bill');
         } else {
-            this.print_xml();
+            this.print_html();
         }
     },
 });
diff --git a/addons/pos_restaurant/static/src/xml/floors.xml b/addons/pos_restaurant/static/src/xml/floors.xml
index 36423b93d67..9179a742636 100644
--- a/addons/pos_restaurant/static/src/xml/floors.xml
+++ b/addons/pos_restaurant/static/src/xml/floors.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-extend="XmlReceipt">
+    <t t-extend="OrderReceipt">
         <t t-jquery='.cashier' t-operation='append'>
             <t t-if='receipt.table'>
                 at table <t t-esc='receipt.table' />
diff --git a/addons/pos_restaurant/static/src/xml/multiprint.xml b/addons/pos_restaurant/static/src/xml/multiprint.xml
index 282d07421c2..e43e63a765b 100644
--- a/addons/pos_restaurant/static/src/xml/multiprint.xml
+++ b/addons/pos_restaurant/static/src/xml/multiprint.xml
@@ -10,48 +10,44 @@
 
     <t t-name="NameWrapped">
         <t t-foreach="change.name_wrapped.slice(1)" t-as="wrapped_line">
-            <line>
-                <left></left>
-                <right><t t-esc="wrapped_line"/></right>
-            </line>
+            <div>
+                <span class="pos-receipt-right-align" t-esc="wrapped_line"/>
+            </div>
         </t>
     </t>
 
     <t t-name="OrderChangeReceipt">
-        <receipt 
-            align='center' 
-            width='40' 
-            size='double-height' 
-            line-ratio='0.4' 
-            value-decimals='3' 
-            value-thousands-separator=''
-            value-autoint='on' 
-        >
-            <div size='normal' ><t t-esc="changes.name" /></div>
+        <div class="pos-receipt">
+            <div class="pos-receipt-order-data"><t t-esc="changes.name" /></div>
             <t t-if="changes.floor || changes.table">
                 <br />
-                <div><span><t t-esc="changes.floor" /></span> / <span bold='on' size='double'><t t-esc="changes.table"/></span></div>
+                <div class="pos-receipt-title">
+                    <t t-esc="changes.floor" /> / <t t-esc="changes.table"/>
+                </div>
             </t>
             <br />
             <br />
             <t t-if="changes.cancelled.length > 0">
-                <div color='red'>
-                    <div bold='on' size='double'>CANCELLED <span bold='off' size='double-height'><t t-esc='changes.time.hours' />:<t t-esc='changes.time.minutes' /></span> </div>
+                <div class="pos-order-receipt-cancel">
+                    <div class="pos-receipt-title">
+                        CANCELLED
+                        <t t-esc='changes.time.hours'/>:<t t-esc='changes.time.minutes'/>
+                    </div>
                     <br />
                     <br />
                     <t t-foreach="changes.cancelled" t-as="change">
-                        <line>
-                            <left><value><t t-esc="change.qty" /></value></left>
-                            <right><t t-esc="change.name_wrapped[0]" /></right>
-                        </line>
+                        <div>
+                            <t t-esc="change.qty"/>
+                            <span t-esc="change.name_wrapped[0]" class="pos-receipt-right-align"/>
+                        </div>
                         <t t-call="NameWrapped"/>
                         <t t-if="change.note">
-                            <line>
-                                <left>NOTE</left>
-                                <right>...</right>
-                            </line>
-                            <div><span font='b' bold='off' line-ratio='0.4' indent='1' width='30'>--- <t t-esc="change.note" /></span></div>
-                            <line></line>
+                            <div>
+                                NOTE
+                                <span class="pos-receipt-right-align">...</span>
+                            </div>
+                            <div><span class="pos-receipt-left-padding">--- <t t-esc="change.note" /></span></div>
+                            <br/>
                         </t>
                     </t>
                     <br />
@@ -59,28 +55,31 @@
                 </div>
             </t>
             <t t-if="changes.new.length > 0">
-                <div bold='on' size='double'>NEW <span bold='off' size='double-height'><t t-esc='changes.time.hours' />:<t t-esc='changes.time.minutes' /></span> </div>
+                <div class="pos-receipt-title">
+                    NEW
+                    <t t-esc='changes.time.hours'/>:<t t-esc='changes.time.minutes'/>
+                </div>
                 <br />
                 <br />
                 <t t-foreach="changes.new" t-as="change">
-                    <line>
-                        <left><value><t t-esc="change.qty" /></value></left>
-                        <right><t t-esc="change.name_wrapped[0]" /></right>
-                    </line>
+                    <div>
+                        <t t-esc="change.qty"/>
+                        <span t-esc="change.name_wrapped[0]" class="pos-receipt-right-align"/>
+                    </div>
                     <t t-call="NameWrapped"/>
                     <t t-if="change.note">
-                        <line>
-                            <left>NOTE</left>
-                            <right>...</right>
-                        </line>
-                        <div><span font='b' bold='off' line-ratio='0.4' indent='1' width='30'>--- <t t-esc="change.note" /></span></div>
-                        <line></line>
+                        <div>
+                            NOTE
+                            <span class="pos-receipt-right-align">...</span>
+                        </div>
+                        <div><span class="pos-receipt-left-padding">--- <t t-esc="change.note" /></span></div>
+                        <br/>
                     </t>
                 </t>
                 <br />
                 <br />
             </t>
-        </receipt>
+        </div>
     </t>
 
 </templates>
diff --git a/addons/pos_restaurant/static/src/xml/printbill.xml b/addons/pos_restaurant/static/src/xml/printbill.xml
index 97de809b4e9..3e64f249bf3 100644
--- a/addons/pos_restaurant/static/src/xml/printbill.xml
+++ b/addons/pos_restaurant/static/src/xml/printbill.xml
@@ -34,16 +34,18 @@
     </t>
 
     <t t-name="BillReceipt">
-        <receipt align='center' width='40' value-thousands-separator='' >
+        <div class="pos-receipt">
             <t t-if='receipt.company.logo'>
-                <img t-att-src='receipt.company.logo' alt="Logo"/>
+                <img class="pos-receipt-logo" t-att-src='receipt.company.logo' alt="Logo"/>
                 <br/>
             </t>
             <t t-if='!receipt.company.logo'>
-                <h1><t t-esc='receipt.company.name' /></h1>
+                <h1 class="pos-receipt-center-align">
+                    <t t-esc='receipt.company.name' />
+                </h1>
                 <br/>
             </t>
-            <div font='b'>
+            <div class="pos-receipt-contact">
                 <t t-if='receipt.company.contact_address'>
                     <div><t t-esc='receipt.company.contact_address' /></div>
                 </t>
@@ -73,37 +75,29 @@
 
             <!-- Orderlines -->
 
-            <div line-ratio='0.6'>
+            <div class='orderlines'>
                 <t t-foreach='receipt.orderlines' t-as='line'>
                     <t t-set='simple' t-value='line.discount === 0 and line.unit_name === "Units" and line.quantity === 1' />
                     <t t-if='simple'>
-                        <line>
-                            <left><t t-esc='line.product_name' /></left>
-                            <right><value><t t-esc='line.price_display' /></value></right>
-                        </line>
+                        <div>
+                            <t t-esc='line.product_name' />
+                            <span t-esc='widget.format_currency_no_symbol(line.price_display)' class="pos-receipt-right-align"/>
+                        </div>
                     </t>
                     <t t-if='!simple'>
-                        <line><left><t t-esc='line.product_name' /></left></line>
+                        <div><t t-esc='line.product_name' /></div>
                         <t t-if='line.discount !== 0'>
-                            <line indent='1'><left>Discount: <t t-esc='line.discount' />%</left></line>
+                            <div class="pos-receipt-left-padding">Discount: <t t-esc='line.discount'/>%</div>
                         </t>
-                        <line indent='1'>
-                            <left>
-                                <value value-decimals='3' value-autoint='on'>
-                                    <t t-esc='line.quantity' />
-                                </value>
-                                <t t-if='line.unit_name !== "Units"'>
-                                    <t t-esc='line.unit_name' />
-                                </t>
-                                x
-                                <value value-decimals='2'>
-                                    <t t-esc='line.price' />
-                                </value>
-                            </left>
-                            <right>
-                                <value><t t-esc='line.price_display' /></value>
-                            </right>
-                        </line>
+                        <div class="pos-receipt-left-padding">
+                            <t t-esc='Math.round(line.quantity * 1000) / 1000' />
+                            <t t-if='line.unit_name !== "Units"'>
+                                <t t-esc='line.unit_name' />
+                            </t>
+                            x
+                            <t t-esc='widget.format_currency_no_symbol(line.price)'/>
+                            <span t-esc='widget.format_currency_no_symbol(line.price_display)' class="price-display pos-receipt-right-align"/>
+                        </div>
                     </t>
                 </t>
             </div>
@@ -111,61 +105,63 @@
             <!-- Subtotal -->
             <t t-set='taxincluded' t-value='Math.abs(receipt.subtotal - receipt.total_with_tax) &lt;= 0.000001' />
             <t t-if='!taxincluded'>
-                <line><right>--------</right></line>
-                <line><left>Subtotal</left><right> <value><t t-esc="receipt.subtotal" /></value></right></line>
+                <div class="pos-receipt-right-align">--------</div>
+                <br/>
+                <div>Subtotal<span t-esc='widget.format_currency_no_symbol(receipt.subtotal)' class="pos-receipt-right-align"/></div>
                 <t t-foreach='receipt.tax_details' t-as='tax'>
-                    <line>
-                        <left><t t-esc='tax.name' /></left>
-                        <right><value><t t-esc='tax.amount' /></value></right>
-                    </line>
+                    <div>
+                        <t t-esc='tax.name' />
+                        <span t-esc='widget.format_currency_no_symbol(tax.amount)' class="pos-receipt-right-align"/>
+                    </div>
                 </t>
             </t>
 
             <!-- Total -->
 
-            <line><right>--------</right></line>
-            <line size='double-height'>
-                <left><pre>        TOTAL</pre></left>
-                <right><value><t t-esc='receipt.total_with_tax' /></value></right>
-            </line>
+            <div class="pos-receipt-right-align">--------</div>
+            <br/>
+            <div class="pos-receipt-amount">
+                TOTAL
+                <span t-esc='widget.format_currency_no_symbol(receipt.total_with_tax)' class="pos-receipt-right-align"/>
+            </div>
             <br/><br/>
 
             <!-- Extra Payment Info -->
 
             <t t-if='receipt.total_discount'>
-                <line>
-                    <left>Discounts</left>
-                    <right><value><t t-esc='receipt.total_discount'/></value></right>
-                </line>
+                <div>
+                    Discounts
+                    <span t-esc='widget.format_currency_no_symbol(receipt.total_discount)' class="pos-receipt-right-align"/>
+                </div>
             </t>
             <t t-if='taxincluded'>
                 <t t-foreach='receipt.tax_details' t-as='tax'>
-                    <line>
-                        <left><t t-esc='tax.name' /></left>
-                        <right><value><t t-esc='tax.amount' /></value></right>
-                    </line>
+                    <div>
+                        <t t-esc='tax.name' />
+                        <span t-esc='widget.format_currency_no_symbol(tax.amount)' class="pos-receipt-right-align"/>
+                    </div>
                 </t>
             </t>
 
             <!-- Footer -->
-            <t t-if='receipt.footer_xml'>
-                <t t-raw='receipt.footer_xml' />
+            <t t-if='receipt.footer_html'>
+                <t t-raw='receipt.footer_html' class="pos-receipt-center-align"/>
             </t>
 
-            <t t-if='!receipt.footer_xml and receipt.footer'>
+            <t t-if='!receipt.footer_html and receipt.footer'>
                 <br/>
-                <t t-esc='receipt.footer' />
+                <t t-esc='receipt.footer' class="pos-receipt-center-align"/>
                 <br/>
                 <br/>
             </t>
 
             <br/>
-            <div font='b'>
+            <div class="pos-receipt-order-data">
                 <div><t t-esc='receipt.name' /></div>
                 <div><t t-esc='receipt.date.localestring' /></div>
             </div>
 
-        </receipt>
+        </div>
     </t>
 
 </templates>