!fixup CSS on produced pdf

pos_mail_receipt/models/pos_order.py

@@ -33,19 +33,19 @@ class PosOrder(models.Model):
                     "Cannot send the ticket, no email address found for the client"
                 )
             )
-        mail_template = self.env.ref("pos_mail_receipt.email_send_ticket")
         email_values = {}
         if email:
             email_values["email_to"] = email
         else:
             email_values["email_to"] = order.partner_id.email
+
+        receipt = "<main><div class='article'><div class='pos'><div class='pos-receipt-container'>{}</div></div></div></main>".format(body_from_ui)
+
+        bodies, html_ids, header, footer, specific_paperformat_args = self.env["ir.actions.report"]._prepare_html(receipt)
         base64_pdf = self.env["ir.actions.report"]._run_wkhtmltopdf(
-            [body_from_ui.encode("utf-16")],
+            bodies,
             landscape=False,
-            specific_paperformat_args={
-                "data-report-margin-top": 10,
-                "data-report-header-spacing": 10,
-            },
+            specific_paperformat_args=specific_paperformat_args,
         )
         attachment = self.env["ir.attachment"].create(
             {
@@ -59,6 +59,7 @@ class PosOrder(models.Model):
             }
         )
         email_values["attachment_ids"] = [attachment.id]
+        mail_template = self.env.ref("pos_mail_receipt.email_send_ticket")
         mail_template.send_mail(
             order.id, force_send=force, email_values=email_values,
         )

pos_mail_receipt/static/src/css/print.css

@@ -0,0 +1,129 @@
+/* This is a copy of the pos receipt screen CSS
+ * This allows to use it in the backend */
+.pos .receipt-screen .centered-content .button {
+    line-height: 40px;
+    padding: 3px 13px;
+    font-size: 20px;
+    text-align: center;
+    background: rgb(230, 230, 230);
+    margin: 16px;
+    margin-bottom: 0px;
+    border-radius: 3px;
+    border: solid 1px rgb(209, 209, 209);
+    cursor: pointer;
+}
+
+.pos .pos-receipt-container {
+    font-size: 0.75em;
+    text-align: center;
+    direction: ltr;
+}
+
+.pos .pos-sale-ticket {
+    text-align: left;
+    width: 300px;
+    background-color: white;
+    margin: 20px;
+    padding: 15px;
+    font-size: 14px;
+    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;
+}
+
+@page {
+    margin: 0;
+}
+@media print {
+    * {
+        color: black !important;
+    }
+    body {
+        margin: 0;
+        color: white !important;
+        /* avoid black background if backgrounds are printed */
+        background: initial;
+    }
+    .oe_leftbar,
+    .oe_loading,
+    .pos .pos-topheader, 
+    .pos .pos-leftpane, 
+    .pos .keyboard_frame,
+    .pos .receipt-screen header,
+    .pos .receipt-screen .top-content,
+    .pos .receipt-screen .centered-content .button {
+        display: none !important;
+    }
+    .pos,
+    .pos .pos-content,
+    .pos .rightpane,
+    .pos .screen, 
+    .pos .window, 
+    .pos .window .subwindow, 
+    .pos .subwindow .subwindow-container{
+        display: block;
+        position: static;
+        height: auto;
+    }
+    .pos{
+        background: white !important;
+    }
+    .pos .rightpane {
+        left: 0px !important;
+        background-color: white;
+    }
+    .pos .receipt-screen {
+        text-align: left;
+    }
+    .pos .receipt-screen .centered-content{
+        position: static;
+        border: none;
+    }
+    .pos .pos-receipt-container {
+        text-align: left;
+    }
+    .pos-actionbar {
+        display: none !important;
+    }
+    .debug-widget{
+        display: none !important;
+    }
+    .pos *{
+        text-shadow: none !important;
+        box-shadow: none !important;
+        background: transparent !important;
+    }
+    .pos .pos-sale-ticket{
+        margin: 0;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        border: none !important;
+        font-size: 13px !important;
+        width: 266px !important;
+    }
+    .o_debug_manager {
+        display: none !important;
+    }
+    .o_chat_window {
+        display: none !important;
+    }
+}

pos_mail_receipt/static/src/js/screens.js

@@ -24,7 +24,7 @@ odoo.define("pos_mail_receipt.screens", function (require) {
         email: function() {
             var self = this;
             var email = false;
-            var body_from_ui = this.$('.pos-sale-ticket').html()
+            var body_from_ui = this.$('.pos-receipt-container').html()
             if( this.pos.get_order().get_client() && this.pos.get_order().get_client().email ) {
                 self._send_email_server(this.pos.get_order().name, {"email": this.pos.get_order().get_client().email, "body_from_ui": body_from_ui});
             } else {
@@ -79,12 +79,14 @@ odoo.define("pos_mail_receipt.screens", function (require) {
                             'title': error.data.message,
                             'body':  error.data.debug
                         });
+                         this.$('.button.email').removeClass("highlight");
                     }
                     if(connection_problem){
                         self.gui.show_popup('error',{
                             'title': _t('The e-mail could not be sent'),
                             'body': _t('Check your internet connection and try again.'),
                         });
+                         this.$('.button.email').removeClass("highlight");
                     }
                 });
         },

pos_mail_receipt/templates/assets.xml

@@ -11,4 +11,10 @@
         </xpath>
     </template>
 
+     <template id="report_assets_pdf" inherit_id="web.report_assets_pdf">
+         <xpath expr=".">
+            <link href="/pos_mail_receipt/static/src/css/print.css" rel="stylesheet"/>
+        </xpath>
+    </template>
+
 </odoo>