From 201e782dfbb351f70e52032ff4853a754815306a Mon Sep 17 00:00:00 2001 From: Eleftherios Kritsotakis Date: Mon, 7 Mar 2022 07:45:20 +0000 Subject: [PATCH] [IMP] point_of_sale: usability of ClosePosPopup In this commit we modify the ClosePosPopup so that we make it more usable. For this reason we expose less info in order to keep it simple for the user and we rename the footer buttons respecting the Odoo standards. Finally, since we want to make it more obvious to the user and avoid unwanted acceptance of the payment difference, we show ConfirmPopup with the relevant information. task-2755384 subtask of task-2669747 Part-of: odoo/odoo#88006 --- .../src/css/popups/closing_pos_popup.css | 75 ++++++++++--------- .../src/js/ChromeWidgets/HeaderButton.js | 2 +- .../static/src/js/Popups/ClosePosPopup.js | 30 ++++++-- .../src/xml/Popups/CashOpeningPopup.xml | 2 +- .../static/src/xml/Popups/ClosePosPopup.xml | 54 +++++-------- .../static/tests/tours/point_of_sale.js | 2 +- 6 files changed, 86 insertions(+), 79 deletions(-) diff --git a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css index 19d9a3a9e22..bbb3b25271f 100644 --- a/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css +++ b/addons/point_of_sale/static/src/css/popups/closing_pos_popup.css @@ -8,38 +8,39 @@ padding: 15px 50px; } -.pos .close-pos-popup .session-overview { +.pos .close-pos-popup header { display: flex; - margin-bottom: 30px; + justify-content: space-between; + width: auto; + height: 65px; + background-color: rgb(255, 255, 255); } -.pos .close-pos-popup .overview-info { - width: 50%; - display: flex; +.pos .close-pos-popup .title { + height: inherit; + box-sizing: border-box; + padding: 20px; } -.pos .close-pos-popup .overview-info .info-value { - margin-left: 50px; +.pos .close-pos-popup .total-orders { + height: inherit; + box-sizing: border-box; + padding: 20px; } -.pos .close-pos-popup .overview-info span { - margin-bottom: 10px; +.pos .close-pos-popup .total-orders .amount { + margin: 0 15px; } -.pos .close-pos-popup .column-left { - display: flex; - flex-direction: column; - text-align: left; -} - -.pos .close-pos-popup .session-overview .opening-note { - margin-left: 70px; +.pos .close-pos-popup .opening-note { color: darkgrey; text-align: left; font-size: 16px; - width: 250px; + box-sizing: border-box; + width: 100%; max-height: 90px; - padding-left: 10px; + padding: 5px 10px; + margin-bottom: 10px; border-left: solid 3px darkgrey; overflow-y: auto; word-break: break-word; @@ -63,8 +64,16 @@ display: flex; } +.pos .close-pos-popup .right-align { + text-align: right; + padding-right: 20px; +} + .pos .close-pos-popup .payment-methods-overview table .pos-input { - width: 85px; + width: 110px; + text-align: right; + padding-right: 10px; + margin-right: 5px; } .pos .close-pos-popup .payment-methods-overview table .warning { @@ -75,6 +84,7 @@ .pos .close-pos-popup .body .button.icon { margin: 0; float: unset; + margin-right: 0 20px 0 20px; } .pos .close-pos-popup .payment-methods-overview table .cash-sign { @@ -100,31 +110,23 @@ margin: 20px 0; } -.pos .close-pos-popup .accept-closing { - text-align: left; -} - .pos .close-pos-popup .invisible { visibility: hidden; } -.pos .close-pos-popup .accept-closing label, #accept { - cursor: pointer; -} - .pos .close-pos-popup .accept-closing label.disabled { cursor: default; color: grey; } -.pos .close-pos-popup #accept { - all: revert; - margin-right: 10px; +.pos .close-pos-popup .footer { + box-sizing: border-box; + padding-left: 10px; } -.pos .close-pos-popup .accept-closing .warning { - color: red; - font-style: italic; +.pos .close-pos-popup .footer .button { + float: left; + width: 130px; } @media screen and (max-width: 768px) { @@ -149,8 +151,9 @@ } } -.pos .close-pos-popup .footer .button { - width: 150px; +.pos .close-pos-popup .footer .small.button { + float: right; + width: 50px; } .pos .close-pos-popup .footer .button.disabled { diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js index b394f967b5a..7dbb5efd3a2 100644 --- a/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js +++ b/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js @@ -8,7 +8,7 @@ odoo.define('point_of_sale.HeaderButton', function(require) { // This is the close session button class HeaderButton extends PosComponent { onClick() { - this.showPopup('ClosePosPopup'); + this.showPopup('ClosePosPopup', { keepBehind: true }); } } HeaderButton.template = 'HeaderButton'; diff --git a/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js b/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js index 377d30f8e7f..d8836a74cf2 100644 --- a/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js +++ b/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js @@ -40,7 +40,7 @@ odoo.define('point_of_sale.ClosePosPopup', function(require) { this.amountAuthorizedDiff = closingData.amount_authorized_diff; // component state and refs definition - const state = {notes: '', acceptClosing: false, payments: {}}; + const state = {notes: '', payments: {}}; if (this.cashControl) { state.payments[this.defaultCashDetails.id] = {counted: 0, difference: -this.defaultCashDetails.amount, number: 0}; } @@ -84,7 +84,6 @@ odoo.define('point_of_sale.ClosePosPopup', function(require) { } this.state.payments[paymentId].difference = this.env.pos.round_decimals_currency(this.state.payments[paymentId].counted - expectedAmount); - this.state.acceptClosing = false; } updateCountedCash({ total, moneyDetailsNotes, moneyDetails }) { this.state.payments[this.defaultCashDetails.id].counted = total; @@ -95,7 +94,6 @@ odoo.define('point_of_sale.ClosePosPopup', function(require) { } this.manualInputCashCount = false; this.moneyDetails = moneyDetails; - this.state.acceptClosing = false; this.closeDetailsPopup(); } hasDifference() { @@ -105,8 +103,28 @@ odoo.define('point_of_sale.ClosePosPopup', function(require) { const absDifferences = Object.entries(this.state.payments).map(pm => Math.abs(pm[1].difference)); return this.isManager || this.amountAuthorizedDiff == null || Math.max(...absDifferences) <= this.amountAuthorizedDiff; } - canCloseSession() { - return !this.cashControl || !this.hasDifference() || this.state.acceptClosing; + async onCloseSession() { + if (!this.cashControl || !this.hasDifference()) { + this.closeSession(); + } else if (this.hasUserAuthority()) { + const { confirmed } = await this.showPopup('ConfirmPopup', { + title: this.env._t('Payments Difference'), + body: this.env._t('Do you want to accept payments difference and post a profit/loss journal entry?'), + }); + if (confirmed) { + this.closeSession(); + } + } else { + await this.showPopup('ConfirmPopup', { + title: this.env._t('Payments Difference'), + body: _.str.sprintf( + this.env._t('The maximum difference allowed is %s.\n\ + Please contact your manager to accept the closing difference.'), + this.env.pos.format_currency(this.amountAuthorizedDiff) + ), + confirmText: this.env._t('OK'), + }) + } } canCancel() { return true; @@ -120,7 +138,7 @@ odoo.define('point_of_sale.ClosePosPopup', function(require) { this.trigger('close-pos'); } async closeSession() { - if (this.canCloseSession() && !this.closeSessionClicked) { + if (!this.closeSessionClicked) { this.closeSessionClicked = true; let response; if (this.cashControl) { diff --git a/addons/point_of_sale/static/src/xml/Popups/CashOpeningPopup.xml b/addons/point_of_sale/static/src/xml/Popups/CashOpeningPopup.xml index 60e518373d6..98a6d5f7705 100644 --- a/addons/point_of_sale/static/src/xml/Popups/CashOpeningPopup.xml +++ b/addons/point_of_sale/static/src/xml/Popups/CashOpeningPopup.xml @@ -15,7 +15,7 @@ -