[FIX] pos_display_*: refactor to show extra info only in Product screen

pos_display_order_number/__manifest__.py

@@ -17,7 +17,7 @@
     "assets": {
         "point_of_sale._assets_pos": [
             "pos_display_order_number/static/src/xml/pos_display_order_number.xml",
-            "pos_display_order_number/static/src/js/overrides/components/order_widget/**/*",
+            "pos_display_order_number/static/src/js/overrides/screens/order_summary/**/*",
         ],
         "web.assets_tests": [
             "pos_display_order_number/static/tests/tours/**/*",

pos_display_order_number/static/src/js/overrides/screens/order_summary/order_summary.esm.js

@@ -0,0 +1,10 @@
+import {OrderSummary} from "@point_of_sale/app/screens/product_screen/order_summary/order_summary";
+import {patch} from "@web/core/utils/patch";
+import {_t} from "@web/core/l10n/translation";
+
+patch(OrderSummary.prototype, {
+    getOrderName() {
+        const selectedOrder = this.pos.selectedOrder;
+        return _t("Order") + ": " + selectedOrder.pos_reference;
+    },
+});

pos_display_order_number/static/src/xml/pos_display_order_number.xml

@@ -6,8 +6,8 @@ License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 -->
 <templates id="template" xml:space="preserve">
 
-    <t t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('summary-left')]" position="inside">
+    <t t-inherit="point_of_sale.OrderSummary" t-inherit-mode="extension">
+        <xpath expr="//div[@id='extra-info-container']" position="inside">
             <div class="order-number fw-bolder fs-2 lh-sm">
                 <span t-esc="getOrderName()" />
             </div>

pos_display_order_number/static/tests/tours/DisplayOrderNumber.tour.esm.js

@@ -12,7 +12,8 @@ registry.category("web_tour.tours").add("DisplayOrderNumber", {
             ProductScreen.clickDisplayedProduct("Desk Organizer"),
             inLeftSide({
                 content: "Check Order Number is shown",
-                trigger: ".product-screen:has(div.order-number)",
+                trigger:
+                    ".product-screen:has(div#extra-info-container div.order-number)",
             }),
             Chrome.endTour(),
         ].flat(),

pos_display_total_quantity/__manifest__.py

@@ -17,7 +17,7 @@
     "assets": {
         "point_of_sale._assets_pos": [
             "pos_display_total_quantity/static/src/xml/pos_display_total_quantity.xml",
-            "pos_display_total_quantity/static/src/js/overrides/components/order_widget/**/*",
+            "pos_display_total_quantity/static/src/js/overrides/screens/order_summary/**/*",
         ],
         "web.assets_tests": [
             "pos_display_total_quantity/static/tests/tours/**/*",

pos_display_total_quantity/static/src/js/overrides/screens/order_summary/order_summary.esm.js

@@ -0,0 +1,14 @@
+import {OrderSummary} from "@point_of_sale/app/screens/product_screen/order_summary/order_summary";
+import {patch} from "@web/core/utils/patch";
+import {_t} from "@web/core/l10n/translation";
+
+patch(OrderSummary.prototype, {
+    getTotalQuantity() {
+        const selectedOrder = this.pos.selectedOrder;
+        return (
+            _t("Number of articles") +
+            ": " +
+            selectedOrder.lines.reduce((total, line) => total + line.qty, 0)
+        );
+    },
+});

pos_display_total_quantity/static/src/xml/pos_display_total_quantity.xml

@@ -5,8 +5,8 @@
 -->
 <templates id="template" xml:space="preserve">
 
-    <t t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('summary-left')]" position="inside">
+    <t t-inherit="point_of_sale.OrderSummary" t-inherit-mode="extension">
+        <xpath expr="//div[@id='extra-info-container']" position="inside">
             <div class="total-quantity fw-bolder fs-2 lh-sm">
                 <span t-esc="getTotalQuantity()" />
             </div>

pos_display_total_quantity/static/tests/tours/DisplayTotal.tour.esm.js

@@ -8,7 +8,7 @@ export function checkTotalQty(number) {
     return inLeftSide([
         {
             content: `check total qty`,
-            trigger: `.product-screen .summary-left .total-quantity:contains("${number}")`,
+            trigger: `.product-screen #extra-info-container .total-quantity:contains("${number}")`,
         },
     ]);
 }

pos_divide_order_summary/static/src/xml/pos_divide_order_summary.xml

@@ -5,41 +5,12 @@ Copyright (C) 2024 - Camptocamp
 License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 -->
 <templates id="template" xml:space="preserve">
-
-    <t t-inherit="point_of_sale.OrderWidget" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('order-summary')]" position="replace">
+    <t t-inherit="point_of_sale.OrderSummary" t-inherit-mode="extension">
+        <xpath expr="//t[@t-set-slot='details']" position="inside">
             <div
-                class="summary-wrapper d-flex justify-content-between w-100 py-2 px-3 bg-100"
-            >
-                <div class="summary-left justify-content-start flex-column d-flex">
-                    <!-- Placeholder for left-hand side content -->
-                </div>
-                <t t-set="taxTotals" t-value="props.taxTotals" />
-                <div
-                    t-if="taxTotals"
-                    class="order-summary justify-content-start fw-bolder fs-2 lh-sm"
-                >
-                    <div
-                        t-if="taxTotals.has_tax_groups"
-                        class="tax-info subentry d-flex justify-content-between w-100 fs-6 text-muted"
-                    >
-                        Taxes
-                        <div id="order-widget-taxes">
-                        <span
-                            t-esc="formatMonetary(taxTotals.order_sign * taxTotals.tax_amount_currency, {currencyId: taxTotals.currency_id})"
-                            class="tax"
-                        />
-                    </div>
-                    </div>
-                    <div class="d-flex justify-content-between w-100 fs-2">
-                        Total
-                        <span
-                        t-esc="formatMonetary(taxTotals.order_sign * taxTotals.order_total, {currencyId: taxTotals.currency_id})"
-                        class="total"
-                    />
-                    </div>
-                </div>
-            </div>
+                id="extra-info-container"
+                class="order-summary d-flex flex-column gap-1 px-3 py-2 border-top fw-bolder lh-sm rounded-3 bg-white"
+            />
         </xpath>
     </t>
 

pos_divide_order_summary/static/tests/tours/DivideOrderSummary.tour.esm.js

@@ -12,7 +12,7 @@ registry.category("web_tour.tours").add("DivideOrderSummary", {
             ProductScreen.clickDisplayedProduct("Desk Organizer"),
             inLeftSide({
                 content: "Check Summary is divided",
-                trigger: ".product-screen:has(div.summary-left)",
+                trigger: ".product-screen:has(div#extra-info-container)",
             }),
             Chrome.endTour(),
         ].flat(),