From f5c31545db9cf8cb1117430cf69ce77521b4fc56 Mon Sep 17 00:00:00 2001
From: Pierre Masereel <pim@odoo.com>
Date: Mon, 10 Oct 2022 11:29:57 +0000
Subject: [PATCH] [FIX] point_of_sale: fix electronic payment style

When an electronic payment is done in the POS, the payment lines
contains the status of the electronic payment and the corresponding
button to perform actions.

We are now correctly display those informations.

closes odoo/odoo#102957

X-original-commit: 7e237dd6282ecd9ebe95690e445466acbab26ca5
Signed-off-by: Masereel Pierre <pim@odoo.com>
---
 addons/point_of_sale/static/src/scss/pos.scss    | 14 +++++++++++++-
 .../PaymentScreen/PaymentScreenPaymentLines.xml  | 16 ++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/addons/point_of_sale/static/src/scss/pos.scss b/addons/point_of_sale/static/src/scss/pos.scss
index 7ff43abfd59..fd385ff484e 100644
--- a/addons/point_of_sale/static/src/scss/pos.scss
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -1584,12 +1584,23 @@ td {
     border: 1px solid #cacaca;
 }
 .paymentlines .electronic_payment {
-    background: #e2e2e2;
+    background: $gray-200;
     border-collapse: unset;
     font-size: 16px;
     padding-right: 0;
 }
 
+.paymentline .electronic_status {
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 10px;
+    /* make the name of the payment line to be truncated with ellipsis */
+    white-space: nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    padding: map-get($spacers, 3);
+}
+
 .paymentlines .electronic_payment div:first-child {
     flex-grow: 2;
     margin-left: 10px;
@@ -1599,6 +1610,7 @@ td {
 .paymentlines .electronic_payment div:last-child {
     flex-grow: 1;
     text-align: center;
+    padding: map-get($spacers, 3);
 }
 
 .payment-status-container {
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
index d6efbba1b3b..da2e3cff9cf 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
@@ -31,7 +31,7 @@
                         <t t-if="line and line.payment_status">
                             <div class="paymentline electronic_payment">
                                 <t t-if="line.payment_status == 'pending'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Payment request pending
                                     </div>
                                     <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
@@ -39,7 +39,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="line.payment_status == 'retry'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Transaction cancelled
                                     </div>
                                     <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
@@ -47,7 +47,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="line.payment_status == 'force_done'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Connection error
                                     </div>
                                     <div class="button send_force_done" title="Force Done" t-on-click="() => this.trigger('send-force-done', line)">
@@ -55,7 +55,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="line.payment_status == 'waitingCard'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Waiting for card
                                     </div>
                                     <div class="button send_payment_cancel" title="Cancel Payment Request" t-on-click="() => this.trigger('send-payment-cancel', line)">
@@ -63,7 +63,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="['waiting', 'waitingCancel', 'waitingCapture'].includes(line.payment_status)">
-                                    <div>
+                                    <div class="electronic_status">
                                         Request sent
                                     </div>
                                     <div>
@@ -71,7 +71,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="line.payment_status == 'reversing'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Reversal request sent to terminal
                                     </div>
                                     <div>
@@ -79,7 +79,7 @@
                                     </div>
                                 </t>
                                 <t t-elif="line.payment_status == 'done'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Payment Successful
                                     </div>
                                     <t t-if="line.can_be_reversed">
@@ -92,7 +92,7 @@
                                     </t>
                                 </t>
                                 <t t-elif="line.payment_status == 'reversed'">
-                                    <div>
+                                    <div class="electronic_status">
                                         Payment reversed
                                     </div>
                                     <div></div>