[IMP] point_of_sale: centralize the due and change in payment interface

The previous behavior is that change is displayed at each payment
line and the remaining is displayed at the bottom. Also, total
amount is lost in the screen.

This commit addresses this issue by showing the values of
remaining amount and change at just one area of the payment
screen.

task-id: 1984690

3 files changed, 101 insertions, 57 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 36ab2b77938..53dd2c65481 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -1333,19 +1333,9 @@ td {
 .pos .paymentline > *{
     padding: 8px 12px;
 }
-.pos .paymentline .col-due,
-.pos .paymentline .col-tendered,
-.pos .paymentline .col-change {
+.pos .paymentline .col-tendered {
     min-width: 90px;
 }
-.pos .paymentline.extra .col-due {
-    border-radius: 0 0 6px 6px;
-    border-top: solid 1px rgb(230, 230, 230);
-    font-weight: bold;
-}
-.pos .paymentline .col-change.highlight {
-    background: rgb(184, 152, 204);
-}
 .pos .paymentline .col-name {
     font-size: 16px;
 }
@@ -1440,6 +1430,29 @@ td {
     font-size: 16px;
 }
 
+.payment-status-container {
+    display: flex;
+    justify-content: space-between;
+    font-size: 25px;
+    padding-top: 15px;
+}
+
+.payment-status-total-due {
+    font-size: 17px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    color: #5c5c5cd1;
+}
+
+.payment-status-container .amount.highlight {
+    font-weight: bold;
+    color: #6EC89B;
+}
+
+.payment-status-container .label {
+    padding-right: 7px;
+}
+
 /* c) The receipt screen */
 
 .pos .receipt-screen .centered-content .button {
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index 3eacd2edc09..3056b928948 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -578,74 +578,73 @@
     </t>
 
     <t t-name="PaymentScreenElectronicPayment">
-        <tr class="send_request paymentline electronic_payment"/>
         <tr class="paymentline electronic_payment">
             <t t-if="line.payment_status == 'pending'">
-                <td colspan="3">
+                <td colspan="2">
                     Payment request pending
                 </td>
-                <td colspan="2" class='button send_payment_request highlight' title="Send Payment Request" t-att-data-cid='line.cid'>
+                <td colspan="1" class='button send_payment_request highlight' title="Send Payment Request" t-att-data-cid='line.cid'>
                     Send
                 </td>
             </t>
             <t t-elif="line.payment_status == 'retry'">
-                <td colspan="3">
+                <td colspan="2">
                     Transaction cancelled
                 </td>
-                <td colspan="2" class='button send_payment_request highlight' title="Send Payment Request" t-att-data-cid='line.cid'>
+                <td colspan="1" class='button send_payment_request highlight' title="Send Payment Request" t-att-data-cid='line.cid'>
                     Retry
                 </td>
             </t>
             <t t-elif="line.payment_status == 'force_done'">
-                <td colspan="3">
+                <td colspan="2">
                     Connection error
                 </td>
-                <td colspan="2" class='button send_force_done' title="Force Done" t-att-data-cid='line.cid'>
+                <td colspan="1" class='button send_force_done' title="Force Done" t-att-data-cid='line.cid'>
                     Force done
                 </td>
             </t>
             <t t-elif="line.payment_status == 'waitingCard'">
-                <td colspan="3">
+                <td colspan="2">
                     Waiting for card
                 </td>
-                <td colspan="2" class='button send_payment_cancel' title="Cancel Payment Request" t-att-data-cid='line.cid'>
+                <td colspan="1" class='button send_payment_cancel' title="Cancel Payment Request" t-att-data-cid='line.cid'>
                     Cancel
                 </td>
             </t>
             <t t-elif="['waiting', 'waitingCancel'].includes(line.payment_status)">
-                <td colspan="3">
+                <td colspan="2">
                     Request sent
                 </td>
-                <td colspan="2">
+                <td colspan="1">
                     <i class='fa fa-spinner fa-spin' role='img'/>
                 </td>
             </t>
             <t t-elif="line.payment_status == 'reversing'">
-                <td colspan="3">
+                <td colspan="2">
                     Reversal request sent to terminal
                 </td>
-                <td colspan="2">
+                <td colspan="1">
                     <i class='fa fa-spinner fa-spin' role='img'/>
                 </td>
             </t>
             <t t-elif="line.payment_status == 'done'">
                 <t t-if="line.can_be_reversed">
-                    <td colspan="3">
+                    <td colspan="2">
                         Payment Successful
                     </td>
-                    <td colspan="2" class='button send_payment_reversal' title="Reverse Payment" t-att-data-cid='line.cid'>
+                    <td colspan="1" class='button send_payment_reversal' title="Reverse Payment" t-att-data-cid='line.cid'>
                         Reverse
                     </td>
                 </t>
                 <t t-else="">
-                    <td colspan="5">
+                    <td colspan="3">
                         Payment Successful
                     </td>
                 </t>
             </t>
             <t t-elif="line.payment_status == 'reversed'">
                 <tr class="paymentline electronic_payment">
-                    <td colspan="5">
+                    <td colspan="3">
                         Payment reversed
                     </td>
                  </tr>
@@ -666,19 +665,40 @@
         </t>
 
         <t t-if="paymentlines.length">
+            <div class="payment-status-container">
+                <div>
+                    <div class="payment-status-remaining">
+                        <span class="label">Remaining</span>
+                        <span t-att-class="order.get_due() > 0 ? 'amount highlight' : 'amount'">
+                            <t t-esc="widget.format_currency(order.get_due() > 0 ? order.get_due() : 0)" />
+                        </span>
+                    </div>
+                    <div class="payment-status-total-due">
+                        <span class="label">Total Due</span>
+                        <span>
+                            <t t-esc="widget.format_currency(order.get_total_with_tax())" />
+                        </span>
+                    </div>
+                </div>
+                <div>
+                    <div class="payment-status-change">
+                        <span class="label">Change</span>
+                        <span t-att-class="order.get_change() > 0 ? 'amount highlight' : 'amount'">
+                            <t t-esc="widget.format_currency(order.get_change())" />
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <hr />
             <table class='paymentlines'>
                 <colgroup>
-                    <col class='due' />
                     <col class='tendered' />
-                    <col class='change' />
                     <col class='method' />
                     <col class='controls' />
                 </colgroup>
                 <thead>
                     <tr class='label'>
-                        <th>Due</th>
                         <th>Tendered</th>
-                        <th>Change</th>
                         <th>Method</th>
                         <th></th>
                     </tr>
@@ -687,7 +707,6 @@
                     <t t-foreach='paymentlines' t-as='line'>
                         <t t-if='line.selected'>
                             <tr class='paymentline selected'>
-                                <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.get_due(line))' /> </td>
                                 <t t-if="line &amp;&amp; line.payment_status &amp;&amp; ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                     <td class='col-tendered'>
                                         <t t-esc='widget.format_currency_no_symbol(line.get_amount())' />
@@ -698,15 +717,6 @@
                                         <t t-esc='widget.inputbuffer' />
                                     </td>
                                 </t>
-                                <t t-if='order.get_change(line)'>
-                                    <td class='col-change highlight' >
-                                        <t t-esc='widget.format_currency_no_symbol(order.get_change(line))' />
-                                    </td>
-                                </t>
-                                <t t-if='!order.get_change(line)'>
-                                    <td class='col-change' ></td>
-                                </t>
-
                                 <td class='col-name' > <t t-esc='line.name' /> </td>
                                 <t t-if="line &amp;&amp; line.payment_status &amp;&amp; ['done', 'reversed', 'reversing'].includes(line.payment_status)">
                                     <td/>
@@ -724,13 +734,7 @@
                         </t>
                         <t t-if='!line.selected'>
                             <tr class='paymentline' t-att-data-cid='line.cid'>
-                                <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(order.get_due(line))' /> </td>
                                 <td class='col-tendered'> <t t-esc='widget.format_currency_no_symbol(line.get_amount())' /> </td>
-                                <td class='col-change'>
-                                    <t t-if='order.get_change(line)'>
-                                        <t t-esc='widget.format_currency_no_symbol(order.get_change(line))' />
-                                     </t>
-                                </td>
                                 <td class='col-name'> <t t-esc='line.name' /> </td>
                                 <t t-if="line &amp;&amp; line.payment_status &amp;&amp; ['done', 'reversed', 'reversing'].includes(line.payment_status)">
                                     <td/>
@@ -743,11 +747,6 @@
                             </tr>
                         </t>
                     </t>
-                    <t t-if='extradue'>
-                        <tr class='paymentline extra' t-att-data-cid='0'>
-                            <td class='col-due'> <t t-esc='widget.format_currency_no_symbol(extradue)' /> </td>
-                        </tr>
-                    </t>
                 </tbody>
             </table>
         </t>
diff --git a/addons/point_of_sale/static/tests/tours/point_of_sale.js b/addons/point_of_sale/static/tests/tours/point_of_sale.js
index 77890a56b5a..fa1b55cd0e3 100644
--- a/addons/point_of_sale/static/tests/tours/point_of_sale.js
+++ b/addons/point_of_sale/static/tests/tours/point_of_sale.js
@@ -354,15 +354,47 @@ odoo.define('point_of_sale.tour.acceptance', function (require) {
     steps = steps.concat(add_product_to_order('Desk Organizer'));
     steps = steps.concat(verify_order_total('10.20'));
     steps = steps.concat(goto_payment_screen_and_select_payment_method());
-    steps = steps.concat(generate_payment_screen_keypad_steps("12.20"));
 
+    /*  add payment line of only 5.20
+        status:
+            order-total := 10.20
+            total-payment := 11.70
+        expect:
+            remaining := 0.00
+            change := 1.50
+    */
+    steps = steps.concat(generate_payment_screen_keypad_steps("5.20"));
     steps = steps.concat([{
-        content: "verify tendered",
-        trigger: '.col-tendered:contains("12.20")',
+        content: "verify remaining",
+        trigger: '.payment-status-remaining .amount:contains("5.00")',
         run: function () {}, // it's a check
     }, {
         content: "verify change",
-        trigger: '.col-change:contains("2.00")',
+        trigger: '.payment-status-change .amount:contains("0.00")',
+        run: function () {}, // it's a check
+    }]);
+
+    /*  make additional payment line of 6.50
+        status:
+            order-total := 10.20
+            total-payment := 11.70
+        expect:
+            remaining := 0.00
+            change := 1.50
+    */
+    steps = steps.concat([{
+        content: "pay with cash",
+        trigger: '.paymentmethod:contains("Cash")',
+    }]);
+    steps = steps.concat(generate_payment_screen_keypad_steps("6.50"));
+
+    steps = steps.concat([{
+        content: "verify remaining",
+        trigger: '.payment-status-remaining .amount:contains("0.00")',
+        run: function () {}, // it's a check
+    }, {
+        content: "verify change",
+        trigger: '.payment-status-change .amount:contains("1.50")',
         run: function () {}, // it's a check
     }]);