[IMP] pos_self_order: add quantity selector to product_info_popup

In the self, when clicking on the information tag on a product, the
product_info_popup is displayed. In this popup, the user has
the possibility to add the product to its cart. However, the
quantity is always set to 1. This commit adds a quantity selector
to the product_info_popup so that the user can choose the quantity
he wants to add to its cart. For the products that have attributes or
are combos, the quantity selector is not displayed as it will be
displayed later in the process after clicking on add to cart.

Part-of: odoo/odoo#139187

addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js

@@ -163,7 +163,7 @@ class Check {
     checkStatus(orderName, status) {
         return [
             {
-                trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(6):contains(${status})`,
+                trigger: `.ticket-screen .order-row > .col:contains("${orderName}") ~ .col:nth-child(7):contains(${status})`,
                 run: () => {},
                 mobile: false,
             },

addons/pos_self_order/static/src/app/components/product_card/product_card.js

@@ -78,7 +78,7 @@ export class ProductCard extends Component {
         }, 600);
     }
 
-    async selectProduct() {
+    async selectProduct(qty = 1) {
         const product = this.props.product;
 
         if (!this.selfOrder.ordering || !product.self_order_available) {
@@ -97,13 +97,13 @@ export class ProductCard extends Component {
             );
 
             if (isProductInCart) {
-                isProductInCart.qty++;
+                isProductInCart.qty += qty;
             } else {
                 const lines = this.selfOrder.currentOrder.lines;
                 const line = new Line({
                     id: null,
                     uuid: null,
-                    qty: 1,
+                    qty: qty,
                     product_id: product.id,
                 });
                 line.full_product_name = constructFullProductName(
@@ -121,8 +121,8 @@ export class ProductCard extends Component {
         this.dialog.add(ProductInfoPopup, {
             product: this.props.product,
             title: this.props.product.name,
-            addToCart: () => {
-                this.selectProduct();
+            addToCart: (qty) => {
+                this.selectProduct(qty);
             },
         });
     }

addons/pos_self_order/static/src/app/components/product_card/product_card.xml

@@ -4,7 +4,7 @@
         <article class="self_order_product_card d-flex flex-row-reverse flex-md-column align-items-start gap-2 user-select-none"
             role="button"
             t-att-title="props.product.name"
-            t-on-click="selectProduct"
+            t-on-click="() => this.selectProduct()"
             t-ref="selfProductCard">
             <div t-if="props.product.description_self_order" class="product-information-tag" t-on-click.prevent.stop="showProductInfo">
                 <i class="product-information-tag-logo fa fa-info fs-4" role="img" aria-label="Product Information" title="Product Information" />

addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.js

@@ -1,6 +1,6 @@
 /** @odoo-module */
 
-import { Component, useExternalListener } from "@odoo/owl";
+import { Component, useExternalListener, useState } from "@odoo/owl";
 
 export class ProductInfoPopup extends Component {
     static template = "pos_self_order.ProductInfoPopup";
@@ -8,10 +8,23 @@ export class ProductInfoPopup extends Component {
 
     setup() {
         useExternalListener(window, "click", this.props.close);
+        this.state = useState({
+            qty: 1,
+        });
     }
 
     addToCartAndClose() {
-        this.props.addToCart();
+        this.props.addToCart(this.state.qty);
         this.props.close();
     }
+
+    changeQuantity(increase) {
+        const currentQty = this.state.qty;
+
+        if (!increase && currentQty === 1) {
+            return;
+        }
+
+        return increase ? this.state.qty++ : this.state.qty--;
+    }
 }

addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.xml

@@ -10,8 +10,17 @@
                             <button type="button" class="btn-close" t-on-click.stop="() => this.props.close()"></button>
                         </div>
                         <span class="modal-body o_self_order_main_desc fs-3 p-4 ps-5 overflow-auto" t-out="props.product.description_self_order" />
-                        <div class="modal-footer">
+                        <div class="modal-footer d-flex flex-row-reverse justify-content-between align-items-center">
                             <button type="button" class="btn btn-primary" t-on-click.stop="() => this.addToCartAndClose()">Add to Cart</button>
+                            <div t-if="!props.product.isCombo and !props.product.attributes.length > 0" class="o_self_order_incr_button btn-group " role="group" aria-label="Quantity select" >
+                                <button type="button"
+                                    t-on-click = "() => this.changeQuantity(false)"
+                                    class="btn btn-secondary"><span class="fs-2 lh-1 fa-fw d-inline-block">－</span></button>
+                                <div class="o-so-tabular-nums d-flex align-items-center px-3 text-bg-200" t-esc="state.qty"/>
+                                <button type="button"
+                                    t-on-click = "() => this.changeQuantity(true)"
+                                    class="btn btn-secondary"><span class="fs-2 lh-1 fa-fw d-inline-block">＋</span></button>
+                            </div>
                         </div>
                     </div>
                 </div>