[IMP] pos_restaurant: Order button: Display product summary by category

We want the order button to display the product summary by category to give more feedback to the waiter while taking an order.

closes odoo/odoo#116846

Task-id: 3229596
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/point_of_sale/static/src/js/Screens/ProductScreen/ActionpadWidget.js

@@ -22,7 +22,6 @@ export class ActionpadWidget extends Component {
 
     clickPay() {
         const order = this.pos.globalState.get_order();
-
         if (order.orderlines.length) {
             order.pay();
         }

addons/pos_restaurant/static/src/js/Screens/ProductScreen/ActionpadWidget.js

@@ -1,6 +1,7 @@
 /** @odoo-module */
 import { patch } from "@web/core/utils/patch";
 import { ActionpadWidget } from "@point_of_sale/js/Screens/ProductScreen/ActionpadWidget";
+import { nbsp } from "@web/core/utils/strings";
 /**
  * @props partner
  */
@@ -37,11 +38,34 @@ patch(ActionpadWidget.prototype, "point_of_sale.ActionpadWidget", {
             }
         }
     },
+    hasQuantity(order) {
+        if (!order) {
+            return false;
+        } else {
+            return (
+                order.orderlines.reduce((totalQty, line) => totalQty + line.get_quantity(), 0) > 0
+            );
+        }
+    },
     get highlightPay() {
         return (
             this._super(...arguments) &&
             this.pos.globalState.printers_category_ids_set.size &&
-            !this.currentOrder.hasChangesToPrint()
+            !this.currentOrder.hasChangesToPrint() &&
+            this.hasQuantity(this.currentOrder)
         );
     },
+    get categoryCount() {
+        const categories = {};
+        for (const orderline of this.currentOrder.printingChanges.new) {
+            const category = this.pos.globalState.db.get_product_by_id(orderline.product_id).pos_categ_id[1];
+            const numProd = orderline.quantity;
+            categories[category] = categories[category] ? categories[category] + numProd : numProd;
+        }
+        let result = "";
+        for (const key in categories) {
+            result = result + categories[key] + nbsp + key + " | ";
+        }
+        return result.slice(0, -2);
+    },
 });

addons/pos_restaurant/static/src/scss/restaurant.scss

@@ -42,10 +42,41 @@
     border-radius: 30px;
     margin-bottom: 10px;
 }
+
+.pos .submit-order .submit-circle-smaller {
+    display: block;
+    font-size: 13px;
+    line-height: var(--btn-height-size);
+    background: $gray-900;
+    color: white;
+    width: 25px;
+    text-align: center;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    height: 25px;
+    top: 4px;
+    position: relative;
+}
 .pos .submit-order .submit-circle .fa {
     position: relative;
     top: -1px;
 }
+.pos .submit-order .submit-circle-smaller .fa {
+    position: relative;
+    top: -14px;
+}
+.pos .submit-order .smaller-display{
+    gap: 10px; 
+    display: flex; 
+    align-items:center;
+}
+.break-line {
+    box-sizing: border-box;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
 .pos .order-button.floor-button {
     display: flex;
     align-items: center;

addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml

@@ -8,10 +8,15 @@
                 class="button submit-order"
                 t-att-class="addedClasses"
                 t-on-click="submitOrder">
-                <div class="submit-circle">
-                    <i class="fa fa-cutlery"></i>
+                <div t-att-class ="categoryCount ? 'smaller-display' : 'none'">
+                    <div  t-att-class = "categoryCount ? 'submit-circle-smaller' : 'submit-circle'">
+                            <i class="fa fa-cutlery"></i>
+                    </div>
+                    Order
+                </div>
+                <div class = "break-line">
+                    <span t-esc="categoryCount"/>
                 </div>
-                Order
             </button>
         </xpath>
         <xpath expr="//button[hasclass('validation')]" position="attributes">