[IMP] point_of_sale: responsive UI

The point of sale user interface has been adapted to work on mobile
devices.

We modified the design of payment lines to look like payment methods and
stack them together in the mobile view.

When you had a cash method, the amount was not preffilled during
payment, now we always prefill the amount to keep it more simple.

closes odoo/odoo#51891

Task-id: 1887609
Related: odoo/upgrade#1334
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

1 files changed, 39 insertions, 0 deletions

diff --git a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
new file mode 100644
index 00000000000..024a77b3882
--- /dev/null
+++ b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
@@ -0,0 +1,39 @@
+odoo.define('point_of_sale.MobileOrderWidget', function(require) {
+    'use strict';
+
+    const PosComponent = require('point_of_sale.PosComponent');
+    const Registries = require('point_of_sale.Registries');
+
+    class MobileOrderWidget extends PosComponent {
+        constructor() {
+            super(...arguments);
+            this.pane = this.props.pane;
+            this.update();
+        }
+        get order() {
+            return this.env.pos.get_order();
+        }
+        mounted() {
+          this.order.on('change', () => {
+              this.update();
+              this.render();
+          });
+          this.order.orderlines.on('change', () => {
+              this.update();
+              this.render();
+          });
+        }
+        update() {
+            const total = this.order ? this.order.get_total_with_tax() : 0;
+            const tax = this.order ? total - this.order.get_total_without_tax() : 0;
+            this.total = this.env.pos.format_currency(total);
+            this.items_number = this.order ? this.order.orderlines.reduce((items_number,line) => items_number + line.quantity, 0) : 0;
+        }
+    }
+
+    MobileOrderWidget.template = 'MobileOrderWidget';
+
+    Registries.Component.add(MobileOrderWidget);
+
+    return MobileOrderWidget;
+});