From bc63c53f07886382dc03999b4c00db1bc52a2efd Mon Sep 17 00:00:00 2001
From: "Adrien Guilliams (adgu)" <adgu@odoo.com>
Date: Wed, 18 Oct 2023 13:36:11 +0200
Subject: [PATCH] [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
---
 .../tours/helpers/TicketScreenTourMethods.js    |  2 +-
 .../app/components/product_card/product_card.js | 10 +++++-----
 .../components/product_card/product_card.xml    |  2 +-
 .../product_info_popup/product_info_popup.js    | 17 +++++++++++++++--
 .../product_info_popup/product_info_popup.xml   | 11 ++++++++++-
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js b/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js
index 7426dd27b55..a53fd1a4573 100644
--- a/addons/point_of_sale/static/tests/tours/helpers/TicketScreenTourMethods.js
+++ b/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,
             },
diff --git a/addons/pos_self_order/static/src/app/components/product_card/product_card.js b/addons/pos_self_order/static/src/app/components/product_card/product_card.js
index 0135c5fa048..128fe63317b 100644
--- a/addons/pos_self_order/static/src/app/components/product_card/product_card.js
+++ b/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);
             },
         });
     }
diff --git a/addons/pos_self_order/static/src/app/components/product_card/product_card.xml b/addons/pos_self_order/static/src/app/components/product_card/product_card.xml
index a44d66a788a..79d104aabfc 100644
--- a/addons/pos_self_order/static/src/app/components/product_card/product_card.xml
+++ b/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" />
diff --git a/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.js b/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.js
index 46f94f62c8f..28195cd1842 100644
--- a/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.js
+++ b/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--;
+    }
 }
diff --git a/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.xml b/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.xml
index 70f41001aa8..a2ac112bea3 100644
--- a/addons/pos_self_order/static/src/app/components/product_info_popup/product_info_popup.xml
+++ b/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>