From e114934423ec1da9eddaf6e1285cb59967b376ef Mon Sep 17 00:00:00 2001
From: roen-odoo <roen@odoo.com>
Date: Tue, 12 Mar 2024 14:24:41 +0000
Subject: [PATCH] [FIX] point_of_sale: fix receipt qrcode size on iOS

Current behavior:
When printing a receipt with a QR code on an iOS device, the QR code was
too small and couldn't be scanned

Steps to reproduce:
- Setup an ePos printer for the PoS
- Activate QRCode on receipt option
- Start a PoS session on an iOS device
- Add some product to the order and validate it
- On the receipt screen click on the print button
- Try to scan the QR Code on the ticket (it's probably too small)

Note:
If you don't have an iOS device you can use browserstack and use ngrok
to expose your local server to the internet and connect to it on
browserstack. You can do the same process to expose the printer so that
you will be able to print from browserstack.

opw-3788988

closes odoo/odoo#159185

X-original-commit: 7fff77b5b60e15f20622ce0a9c6dbe28e25e2660
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
Signed-off-by: Robin Engels (roen) <roen@odoo.com>
---
 .../src/app/screens/receipt_screen/receipt/order_receipt.xml | 2 +-
 addons/point_of_sale/static/src/css/pos_receipts.css         | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml
index 2fdb7058f77..5a4ac6c32ac 100644
--- a/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml
+++ b/addons/point_of_sale/static/src/app/screens/receipt_screen/receipt/order_receipt.xml
@@ -91,7 +91,7 @@
                 <div class="pos-receipt-order-data mb-2">
                     Scan me to request an invoice for your purchase.
                 </div>
-                <img id="posqrcode" t-att-src="props.data.pos_qr_code" class="pos-receipt-logo"/>
+                <img id="posqrcode" t-att-src="props.data.pos_qr_code" class="pos-receipt-qrcode"/>
             </div>
 
             <div t-if="props.data.ticket_code">
diff --git a/addons/point_of_sale/static/src/css/pos_receipts.css b/addons/point_of_sale/static/src/css/pos_receipts.css
index 10cff6c30d9..8d266f6ef8b 100644
--- a/addons/point_of_sale/static/src/css/pos_receipts.css
+++ b/addons/point_of_sale/static/src/css/pos_receipts.css
@@ -27,6 +27,11 @@
     margin: 0 auto;
 }
 
+.pos-receipt .pos-receipt-qrcode {
+    display: block;
+    margin: 0 auto;
+}
+
 .pos-receipt .pos-receipt-contact {
     text-align: center;
     font-size: 75%;