From 218fd1a854088c2d71bb8fa4d5ef2c22eac4fe1e Mon Sep 17 00:00:00 2001
From: "Adrien Guilliams (adgu)" <adgu@odoo.com>
Date: Wed, 18 Oct 2023 16:49:08 +0200
Subject: [PATCH] [IMP] pos_self_order: remove resume section for
 attribute_selection

In this commit, we remove the resume section for the attribute_selection
as it can lead to a lot of screen for the end-user (especially if the
attribute_selection is used in a combo). We add the add to cart button
instead with a quantity selector. The end resume is kept for the combo
selection.

Part-of: odoo/odoo#139187
---
 .../attribute_selection.js                    |  12 +-
 .../attribute_selection.xml                   | 105 +++++++-----------
 .../combo_selection/combo_selection.js        |   6 +-
 .../combo_selection/combo_selection.xml       |   2 +-
 .../app/pages/product_page/product_page.js    |   7 +-
 .../app/pages/product_page/product_page.xml   |   1 -
 6 files changed, 44 insertions(+), 89 deletions(-)

diff --git a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js
index 6c900ec0049..41871d96c9f 100644
--- a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js
+++ b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.js
@@ -7,7 +7,7 @@ import { attributeFlatter, attributeFormatter } from "@pos_self_order/app/utils"
 
 export class AttributeSelection extends Component {
     static template = "pos_self_order.AttributeSelection";
-    static props = ["toggleQtyBtn", "product"];
+    static props = ["product"];
 
     setup() {
         this.selfOrder = useSelfOrder();
@@ -15,17 +15,12 @@ export class AttributeSelection extends Component {
         this.currentAttribute = 0;
 
         this.state = useState({
-            showResume: false,
             showNext: false,
             showCustomInput: false,
         });
 
         this.selectedValues = useState(this.env.selectedValues);
 
-        if (!this.env.editable) {
-            this.toggleResume();
-        }
-
         this.initAttribute();
     }
 
@@ -90,11 +85,6 @@ export class AttributeSelection extends Component {
         }
     }
 
-    toggleResume() {
-        this.state.showResume = !this.state.showResume;
-        this.props.toggleQtyBtn(this.state.showResume);
-    }
-
     isChecked(attribute, value) {
         return attribute.display_type === "multi"
             ? this.selectedValues[attribute.id][value.id]
diff --git a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml
index 258d7f50d21..7fa234403ac 100644
--- a/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml
+++ b/addons/pos_self_order/static/src/app/components/attribute_selection/attribute_selection.xml
@@ -2,76 +2,49 @@
 <templates id="template" xml:space="preserve">
     <t t-name="pos_self_order.AttributeSelection">
         <div class="self_order_attribute_selection d-flex flex-column flex-grow-1">
-            <t t-if="state.showResume">
-                <div class="attribute_name py-1 mt-4 mb-2 px-3">
-                    <h1>Your resume</h1>
-                </div>
-                <ul class="attribute-selection-content list-group mx-3 mb-5">
-                    <li class="list-group-item d-flex align-items-center flex-wrap gap-2 py-3" t-foreach="attributeSelected" t-as="value" t-key="value.name">
-                        <div class="flex-grow-1">
-                            <span class="me-2 text-muted"><t t-out="value.name"/>:</span><strong t-out="value.value"/>
-                        </div>
-                        <button t-attf-class="{{ !this.env.editable ? 'disabled' : '' }} btn btn-secondary ms-auto" t-on-click="this.toggleResume">
-                            <i class="fa fa-pencil me-1"/> Edit
-                        </button>
-                    </li>
-                </ul>
-            </t>
-            <t t-else="">
-                <div class="attribute-selection-content align-items-center justify-content-start px-3 flex-grow-1">
-                    <div class="d-flex flex-column">
-                        <div t-foreach="this.props.product.attributes" t-as="attribute" t-key="attribute.id">
-                            <h2 t-out="attribute.name"/>
-                            <div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6 mb-5">
-                                <t t-foreach="availableAttributeValue(attribute)" t-as="value" t-key="value.id">
-                                    <div class="col">
-                                        <div class="self_order_attribute_selection_option ratio ratio-16x9 w-100">
-                                            <label t-attf-for="{{ attribute.id }}_{{ value.id }}"
-                                                   t-attf-class="{{ this.isChecked(attribute, value) ? 'text-bg-primary border-primary active' : '' }}
-                                                   d-flex flex-column align-items-center justify-content-center rounded border">
-                                                <div class="name position-relative d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100 py-2 text-center">
-                                                    <span t-out="value.name"/>
-                                                    <span t-if="value.price_extra.list_price">
-                                                        + <t t-out="selfOrder.formatMonetary(value.price_extra.list_price)" />
-                                                    </span>
-                                                </div>
-                                            </label>
-                                            <input
-                                                type="radio"
-                                                class="d-none"
-                                                t-if="attribute.display_type !== 'multi'"
-                                                t-att-value="value.id"
-                                                t-attf-id="{{ attribute.id }}_{{ value.id }}"
-                                                t-model="this.selectedValues[attribute.id]" />
-                                            <input
-                                                type="checkbox"
-                                                class="d-none"
-                                                t-else=""
-                                                t-att-checked="this.isChecked(attribute, value)"
-                                                t-att-value="value.id"
-                                                t-model="this.selectedValues[attribute.id][value.id]"
-                                                t-attf-id="{{ attribute.id }}_{{ value.id }}" />
-                                        </div>
+            <div class="attribute-selection-content align-items-center justify-content-start px-3 flex-grow-1">
+                <div class="d-flex flex-column">
+                    <div t-foreach="this.props.product.attributes" t-as="attribute" t-key="attribute.id">
+                        <h2 t-out="attribute.name"/>
+                        <div class="row g-2 g-md-3 g-xl-4 justify-content-between justify-content-md-start row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-xl-5 row-cols-xxl-6 mb-5">
+                            <t t-foreach="availableAttributeValue(attribute)" t-as="value" t-key="value.id">
+                                <div class="col">
+                                    <div class="self_order_attribute_selection_option ratio ratio-16x9 w-100">
+                                        <label t-attf-for="{{ attribute.id }}_{{ value.id }}"
+                                                t-attf-class="{{ this.isChecked(attribute, value) ? 'text-bg-primary border-primary active' : '' }}
+                                                d-flex flex-column align-items-center justify-content-center rounded border">
+                                            <div class="name position-relative d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100 py-2 text-center">
+                                                <span t-out="value.name"/>
+                                                <span t-if="value.price_extra.list_price">
+                                                    + <t t-out="selfOrder.formatMonetary(value.price_extra.list_price)" />
+                                                </span>
+                                            </div>
+                                        </label>
+                                        <input
+                                            type="radio"
+                                            class="d-none"
+                                            t-if="attribute.display_type !== 'multi'"
+                                            t-att-value="value.id"
+                                            t-attf-id="{{ attribute.id }}_{{ value.id }}"
+                                            t-model="this.selectedValues[attribute.id]" />
+                                        <input
+                                            type="checkbox"
+                                            class="d-none"
+                                            t-else=""
+                                            t-att-checked="this.isChecked(attribute, value)"
+                                            t-att-value="value.id"
+                                            t-model="this.selectedValues[attribute.id][value.id]"
+                                            t-attf-id="{{ attribute.id }}_{{ value.id }}" />
                                     </div>
-                                    <div t-if="this.isChecked(attribute, value) and selfOrder.attributeValueById[value.id].is_custom" class="col w-100 order-2">
-                                        <input type="text" t-model="this.env.customValues[value.id].custom_value" class="form-control form-control-lg" placeholder="Enter your custom value" />
-                                    </div>
-                                </t>
-                            </div>
+                                </div>
+                                <div t-if="this.isChecked(attribute, value) and selfOrder.attributeValueById[value.id].is_custom" class="col w-100 order-2">
+                                    <input type="text" t-model="this.env.customValues[value.id].custom_value" class="form-control form-control-lg" placeholder="Enter your custom value" />
+                                </div>
+                            </t>
                         </div>
                     </div>
                 </div>
-            </t>
-        </div>
-        <t t-if="!state.showResume">
-            <div class="page-buttons position-fixed bottom-0 w-100 d-flex justify-content-end p-3 gap-3 bg-view border-top z-index-1">
-                <button class="btn btn-primary btn-lg" t-att-class="this.showNextBtn ? '' : 'disabled'" t-on-click="this.toggleResume">Next</button>
             </div>
-
-            <!-- This element is just a placeholder used to generate enough verstical room for the 'page-buttons' one.  -->
-            <section class="p-3 border-top">
-                <button class="btn btn-lg">Placeholder</button>
-            </section>
-        </t>
+        </div>
     </t>
 </templates>
diff --git a/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.js b/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.js
index 51d445b3bf5..35a06ac7b37 100644
--- a/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.js
+++ b/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.js
@@ -22,10 +22,8 @@ export class ComboSelection extends Component {
         this.props.comboState.selectedProduct = productSelected;
         if (productSelected.attributes.length === 0) {
             this.props.next();
+            return;
         }
-    }
-
-    toggleQtyBtn(bool) {
-        this.props.comboState.showQtyButtons = bool;
+        this.props.comboState.showQtyButtons = true;
     }
 }
diff --git a/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.xml b/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.xml
index b958d304958..3bb6dbd200d 100644
--- a/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.xml
+++ b/addons/pos_self_order/static/src/app/components/combo_selection/combo_selection.xml
@@ -51,7 +51,7 @@
             </div>
         </div>
         <t t-else="">
-            <AttributeSelection toggleQtyBtn.bind="toggleQtyBtn" product="props.comboState.selectedProduct" />
+            <AttributeSelection product="props.comboState.selectedProduct" />
         </t>
     </t>
 </templates>
diff --git a/addons/pos_self_order/static/src/app/pages/product_page/product_page.js b/addons/pos_self_order/static/src/app/pages/product_page/product_page.js
index 6de298e9fc4..ffb8545539d 100644
--- a/addons/pos_self_order/static/src/app/pages/product_page/product_page.js
+++ b/addons/pos_self_order/static/src/app/pages/product_page/product_page.js
@@ -27,7 +27,6 @@ export class ProductPage extends Component {
         this.state = useState({
             qty: 1,
             customer_note: "",
-            showQtyButtons: this.attributes.length === 0,
             product: this.props.product,
         });
 
@@ -55,10 +54,6 @@ export class ProductPage extends Component {
         );
     }
 
-    toggleQtyBtn(bool) {
-        this.state.showQtyButtons = bool;
-    }
-
     initState() {
         const editedLine = this.selfOrder.editedLine;
 
@@ -151,6 +146,6 @@ export class ProductPage extends Component {
     }
 
     get showQtyButtons() {
-        return this.state.showQtyButtons && this.props.product.self_order_available;
+        return this.props.product.self_order_available;
     }
 }
diff --git a/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml b/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
index be8b2fcd87c..fb6e5fa80e1 100644
--- a/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
+++ b/addons/pos_self_order/static/src/app/pages/product_page/product_page.xml
@@ -34,7 +34,6 @@
                 </div>
                 <AttributeSelection
                     t-if="this.product.attributes.length"
-                    toggleQtyBtn.bind="toggleQtyBtn"
                     product="product"/>
             </div>