[FIX] pos_self_order: some adaptation after design refacto

This PR contains a few adaptations and fixes after the major design
refactoring.

closes odoo/odoo#137704

Signed-off-by: David Monnom (moda) <moda@odoo.com>

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

@@ -8,7 +8,7 @@ import { CancelPopup } from "@pos_self_order/app/components/cancel_popup/cancel_
 
 export class OrderWidget extends Component {
     static template = "pos_self_order.OrderWidget";
-    static props = ["action", "removeTopClasses"];
+    static props = ["action", "removeTopClasses?"];
 
     setup() {
         this.selfOrder = useSelfOrder();

addons/pos_self_order/static/src/app/pages/cart_page/cart_page.xml

@@ -21,8 +21,9 @@
                                     <span t-if="selfOrder.currentOrder.isSavedOnServer"><t t-esc="line.qty" />x </span>
                                     <strong t-esc="line.full_product_name"/>
                                 </div>
-                                <div t-if="!selfOrder.currentOrder.isSavedOnServer and this.selfOrder.productByIds[line.product_id]?.attributes.length > 0 || line.child_lines.length > 0" class="d-flex align-items-start gap-2 gap-md-3 my-2">
+                                <div t-if="this.selfOrder.productByIds[line.product_id]?.attributes.length > 0 || childLines.length > 0" class="d-flex align-items-start gap-2 gap-md-3 my-2">
                                     <button
+                                        t-if="!selfOrder.currentOrder.isSavedOnServer"
                                         type="button"
                                         t-on-click="() => this.clickOnLine(line)"
                                         class="btn btn-secondary"> <i class="fa fa-pencil"></i></button>
@@ -30,14 +31,16 @@
                                     <div class="vr"/>
 
                                     <div class="small">
+                                        <div t-if="childLines.length === 0" class="product-info d-flex flex-column flex-grow-1 text-muted">
+                                            <div t-foreach="getSelectedAttributes(line)" t-as="attribute" t-key="attribute.name">
+                                                - <span t-esc="attribute.name" /> : <span t-esc="attribute.value" />
+                                            </div>
+                                        </div>
                                         <div t-foreach="childLines" t-as="cline" t-key="cline.uuid" class="text-muted">
                                             - <span t-esc="cline.full_product_name" /> <span t-if="cline.price_subtotal_incl">(<t t-esc="selfOrder.formatMonetary(cline.price_subtotal_incl)"/>)</span>
                                             <div class="product-info d-flex flex-column flex-grow-1 ms-3">
                                                 <div t-foreach="getSelectedAttributes(cline)" t-as="attribute" t-key="attribute.name">
                                                     - <span t-esc="attribute.name" /> : <span t-esc="attribute.value" />
-                                                    <div t-foreach="getSelectedAttributes(line)" t-as="attribute" t-key="attribute.name" class="text-muted">
-                                                        - <span t-esc="attribute.name" /> : <span t-esc="attribute.value" />
-                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -66,7 +69,7 @@
                                     <button
                                         t-else=""
                                         type="button"
-                                        t-on-click= "() => this.changeQuantity(line, false)"
+                                        t-on-click= "() => this.removeLine(line)"
                                         t-attf-class="btn btn-secondary px-3"><i class="fa fa-fw fa-trash-o"/></button>
 
                                     <div class="o-so-tabular-nums d-flex align-items-center fw-bold px-2 px-md-3 text-bg-200" t-esc="getLineChangeQty(line)"/>

addons/pos_self_order/static/src/app/pages/combo_page/combo_page.xml

@@ -17,7 +17,7 @@
                         <t t-set="isComboCurrent" t-value="currentComboId === combo_id"/>
                         <t t-set="isComboSelected" t-value="false"/>
                         <t t-set="isNextSelected" t-value="false"/>
-                        <t t-foreach="state.selectedCombos"  t-as="selected"  t-key="selected">
+                        <t t-foreach="state.selectedCombos"  t-as="selected"  t-key="selected.id">
                             <t t-if="selected.id === combo_id" t-set="isComboSelected" t-value="true"/>
                         </t>
 
@@ -63,7 +63,7 @@
                             class="o_self_order_main_desc d-block mb-3 text-muted"
                             t-out="state.selectedProduct.description_sale"
                         />
-                        <span class="fs-3" t-esc="selfOrder.formatMonetary(state.selectedProduct.prices)"/>
+                        <span class="fs-3" t-esc="selfOrder.formatMonetary(selfOrder.getProductDisplayPrice(state.selectedProduct))"/>
                     </div>
                 </div>
             </t>

addons/pos_self_order/static/src/app/pages/product_list_page/product_list_page.xml

@@ -36,7 +36,7 @@
                     <i class="oi oi-search"/>
                 </button>
 
-                <div t-if="this.state.search" t-attf-class="position-absolute top-0 left-0 w-100 h-100 px-3 pe-4 d-flex align-items-center bg-view">
+                <div t-if="this.state.search" t-attf-class="position-absolute top-0 start-0 w-100 h-100 px-3 pe-4 d-flex align-items-center bg-view">
                     <input type="text"
                         class="form-control py-3 ps-0 border-0 shadow-none"
                         placeholder="Search product"