pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Joseph Caburnay
2019-10-31 12:16:28 +00:00
parent 95d277966a
commit 56aa962414
3 changed files with 101 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/point_of_sale/static/src/css/pos.css
+24 -11
View File
@@ -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 {
addons/point_of_sale/static/src/xml/pos.xml
+41 -42
View File
@@ -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>
addons/point_of_sale/static/tests/tours/point_of_sale.js
+36 -4
View File
@@ -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
}]);