[FIX] pos_sale: fix screen to show

Because MobileSaleOrderManagementScreen is rendered inside
SaleOrderManagementScreen, the `useListener` calls in
SaleOrderManagementScreen are called twice. This is because
MobileSaleOrderManagementScreen is derived from
SaleOrderManagementScreen. Because of this, when an event is triggered
in the SaleOrderManagementScreen, say the 'click-sale-order', the
handlers are called twice. To fix this, we should not render
MobileSaleOrderManagementScreen inside the SaleOrderManagementScreen
anymore. Instead, depending on the screen size of the device, identified
using `env.isMobile`, we show the appropriate screen, that is, when
`isMobile` is true, we show MobileSaleOrderManagementScreen otherwise,
we show SaleOrderManagementScreen.

closes odoo/odoo#95282

X-original-commit: 6a8a43d09a798be3dfc5581561b67bc5c5521634
Signed-off-by: Masereel Pierre <pim@odoo.com>

addons/pos_sale/static/src/js/SetSaleOrderButton.js

@@ -30,7 +30,8 @@ odoo.define('pos_sale.SetSaleOrderButton', function(require) {
               // LegacyComponent doesn't work the same way as before.
               // We need to use Gui here to show the screen. This will work
               // because ui methods in Gui is bound to the root component.
-              Gui.showScreen('SaleOrderManagementScreen');
+              const screen = this.env.isMobile ? 'MobileSaleOrderManagementScreen' : 'SaleOrderManagementScreen';
+              Gui.showScreen(screen);
           } catch (error) {
               if (isConnectionError(error)) {
                   this.showPopup('ErrorPopup', {

addons/pos_sale/static/src/xml/OrderManagementScreen/MobileSaleOrderManagementScreen.xml

@@ -2,6 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <div t-name="MobileSaleOrderManagementScreen" class="screen-full-width" owl="1">
+    <div class="order-management-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
         <div t-if="mobileState.showDetails" class="leftpane">
             <OrderDetails order="orderManagementContext.selectedOrder" />
             <div class="pads">
@@ -26,5 +27,6 @@
             </div>
         </div>
     </div>
+    </div>
 
 </templates>

addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementScreen.xml

@@ -3,15 +3,12 @@
 
     <t t-name="SaleOrderManagementScreen" owl="1">
         <div class="order-management-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
-            <div t-if="!env.isMobile" class="screen-full-width">
                 <div class="rightpane">
                     <div class="flex-container">
                         <SaleOrderManagementControlPanel />
                         <SaleOrderList orders="orders" initHighlightedOrder="orderManagementContext.selectedOrder" />
                     </div>
                 </div>
-            </div>
-            <MobileSaleOrderManagementScreen t-else="" />
         </div>
     </t>