From a4b617dd958d03e105cef65ea4f174ce69f92b2b Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Mon, 12 Apr 2021 12:34:35 +0000
Subject: [PATCH] [FIX] pos: Move "back" button in the action pad
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When you clicked on "Review", there were not enough space to
properly check the order lines.
The "back" button took a lot of space in this screen.
Additionally, it shouldn't be the primary button in this view...

It's why this button has been moved in the action pad, next to the
payment button.

Task ID: 2453679

X-original-commit: 1418c9f10c80bea6393b47d5ffc1e0217ad1d4ba
Part-of: odoo/odoo#79448
Co-authored-by: Adrien Dieudonné <adr@odoo.com>
---
 addons/point_of_sale/static/src/css/pos.css   | 12 ++++++++---
 .../static/src/js/Misc/MobileOrderWidget.js   |  1 -
 .../js/Screens/ProductScreen/ProductScreen.js | 15 +++++--------
 .../static/src/xml/Misc/MobileOrderWidget.xml | 21 +++++++------------
 .../Screens/ProductScreen/ActionpadWidget.xml |  4 ++++
 .../Screens/ProductScreen/ProductScreen.xml   | 13 ++++--------
 6 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 4e55078233b..a91fcba2666 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -698,9 +698,10 @@ td {
     flex-grow: 1;
 }
 .pos .actionpad .button {
+    --btn-height-size: 54px;
     position: relative;
     display: block;
-    height: 54px;
+    height: var(--btn-height-size);
     width: 100%;
     font-weight: bold;
     vertical-align: middle;
@@ -732,12 +733,17 @@ td {
     border-bottom-left-radius: 4px;
 }
 .pos .actionpad .button.pay {
-    height: 162px;
+    height: calc(var(--btn-height-size) * 3);
+}
+@media screen and (max-width: 768px) {
+    .pos .actionpad .button.pay {
+        height: calc(var(--btn-height-size) * 2);
+    }
 }
 .pos .actionpad .button.pay .pay-circle {
     display: block;
     font-size: 32px;
-    line-height: 54px;
+    line-height: var(--btn-height-size);
     padding-top: 6px;
     background: rgb(86, 86, 86);
     color: white;
diff --git a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
index 024a77b3882..1e4b62f6ad9 100644
--- a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
+++ b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
@@ -7,7 +7,6 @@ odoo.define('point_of_sale.MobileOrderWidget', function(require) {
     class MobileOrderWidget extends PosComponent {
         constructor() {
             super(...arguments);
-            this.pane = this.props.pane;
             this.update();
         }
         get order() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
index d8f6de0f94d..fe7acb6eb74 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
@@ -39,8 +39,10 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
             // We don't do this in the `mounted` lifecycle method because it is called before
             // the callbacks in `onMounted` hook.
             onMounted(() => NumberBuffer.reset());
-            this.state = useState({ numpadMode: 'quantity' });
-            this.mobile_pane = this.props.mobile_pane || 'right';
+            this.state = useState({
+                numpadMode: 'quantity',
+                mobile_pane: this.props.mobile_pane || 'right',
+            });
         }
         mounted() {
             if(this.env.pos.config.cash_control && this.env.pos.pos_session.state == 'opening_control') {
@@ -360,14 +362,7 @@ odoo.define('point_of_sale.ProductScreen', function(require) {
             this.showScreen('PaymentScreen');
         }
         switchPane() {
-            if (this.mobile_pane === "left") {
-                this.mobile_pane = "right";
-                this.render();
-            }
-            else {
-                this.mobile_pane = "left";
-                this.render();
-            }
+            this.state.mobile_pane = this.state.mobile_pane === "left" ? "right" : "left";
         }
     }
     ProductScreen.template = 'ProductScreen';
diff --git a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
index 883631a2a8a..eb8e770c182 100644
--- a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
@@ -3,19 +3,14 @@
 
     <t t-name="MobileOrderWidget" owl="1">
         <div class="switchpane">
-            <t t-if="pane === 'right'">
-                <button class="btn-switchpane" t-on-click="trigger('click-pay')">
-                    <h1>Pay</h1>
-                    <span><t t-esc="total" /></span>
-                </button>
-                <button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
-                    <h1>Review</h1>
-                    <span><t t-esc="items_number"/> items</span>
-                </button>
-            </t>
-            <t t-if="pane === 'left'">
-              <button class="btn-switchpane" t-on-click="trigger('switchpane')"><h1>Back</h1></button>
-            </t>
+            <button class="btn-switchpane" t-on-click="trigger('click-pay')">
+                <h1>Pay</h1>
+                <span><t t-esc="total" /></span>
+            </button>
+            <button class="btn-switchpane secondary" t-on-click="trigger('switchpane')">
+                <h1>Review</h1>
+                <span><t t-esc="items_number"/> items</span>
+            </button>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
index b7395d97971..76676a1c8fe 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
@@ -19,6 +19,10 @@
                 </div>
                 <t t-esc="props.actionName" />
             </button>
+            <button t-if="env.isMobile" class="button back-button" t-on-click="trigger('switchpane')">
+                <i class="fa fa-angle-double-left"/>
+                Back
+            </button>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
index 6a08c9cf08c..80c36e20695 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
@@ -4,7 +4,7 @@
     <t t-name="ProductScreen" owl="1">
         <div class="product-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
             <div class="screen-full-width">
-                <div class="leftpane pane-border" t-if="!env.isMobile || mobile_pane === 'left'">
+                <div class="leftpane pane-border" t-if="!env.isMobile || state.mobile_pane === 'left'">
                     <OrderWidget/>
                     <div class="pads">
                         <div class="control-buttons">
@@ -14,19 +14,14 @@
                         </div>
                         <div class="subpads">
                             <t t-set="_actionName">Payment</t>
-                            <ActionpadWidget client="client" actionName="_actionName" />
+                            <ActionpadWidget client="client" actionName="_actionName" t-on-switchpane="switchPane" />
                             <NumpadWidget activeMode="state.numpadMode" />
                         </div>
                     </div>
-                    <t t-if="env.isMobile">
-                        <MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
-                    </t>
                 </div>
-                <div class="rightpane" t-if="!env.isMobile || mobile_pane === 'right'">
+                <div class="rightpane" t-if="!env.isMobile || state.mobile_pane === 'right'">
                     <ProductsWidget mobileSearchBarIsShown="props.mobileSearchBarIsShown"/>
-                    <t t-if="env.isMobile">
-                        <MobileOrderWidget pane="mobile_pane" t-on-switchpane="switchPane"/>
-                    </t>
+                    <MobileOrderWidget t-if="env.isMobile" pane="state.mobile_pane" t-on-switchpane="switchPane"/>
                 </div>
             </div>
         </div>