From 4e31216c5d5ec65348a17f084e15a0b823463149 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 9 Jan 2023 14:43:50 +0000
Subject: [PATCH] [FIX] point_of_sale, *: prevent block-header from blocking
 whole pos

*: pos_hr_restaurant, pos_restaurant

In #108891 the navbar was extracted out of the Chrome and into its own
components, but when a temp screen is shown, an overlay is placed over
the navbar to prevent the user from using it to navigate away as this
can break some flows, and the overlay was not moved inside the navbar.
This caused the overlay to go over the entire Chrome which was not the
goal.

This commit moves the block-header overlay into the navbar (and adapts
some code to make the tempScreen state accessible inside the navbar).

closes odoo/odoo#109456

Signed-off-by: Trinh Jacky (trj) <trj@odoo.com>
---
 .../static/src/app/navbar/navbar.xml             |  1 +
 addons/point_of_sale/static/src/app/pos_store.js |  1 +
 addons/point_of_sale/static/src/js/Chrome.js     | 16 ++++++----------
 addons/point_of_sale/static/src/xml/Chrome.xml   |  7 +++----
 addons/pos_hr_restaurant/static/src/js/Chrome.js |  2 +-
 addons/pos_restaurant/static/src/js/Chrome.js    |  2 +-
 6 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.xml b/addons/point_of_sale/static/src/app/navbar/navbar.xml
index 906623852f6..cdf9e7a3d85 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.xml
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.xml
@@ -3,6 +3,7 @@
 
     <t t-name="point_of_sale.Navbar" owl="1">
         <div class="pos-topheader">
+            <div t-if="pos.tempScreen" class="block-top-header" />
             <div class="pos-branding">
                 <img t-if="!env.isMobile" class="pos-logo" t-on-click="() => pos.toggleDebugWidget()" src="/point_of_sale/static/src/img/logo.png" alt="Logo" />
                 <CashMoveButton t-if="props.showCashMoveButton" />
diff --git a/addons/point_of_sale/static/src/app/pos_store.js b/addons/point_of_sale/static/src/app/pos_store.js
index b572ab73009..b961d23c138 100644
--- a/addons/point_of_sale/static/src/app/pos_store.js
+++ b/addons/point_of_sale/static/src/app/pos_store.js
@@ -21,6 +21,7 @@ export class PosStore {
         this.debugWidgetIsShown = !toRaw(this).debugWidgetIsShown;
     }, 100);
     mainScreen = { name: null, component: null };
+    tempScreen = null;
     constructor() {
         this.setup();
     }
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index 425ec4e3520..31cfe4abcff 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -25,7 +25,6 @@ import {
     onMounted,
     onWillDestroy,
     useExternalListener,
-    useState,
     useSubEnv,
     reactive,
     markRaw,
@@ -103,9 +102,6 @@ export class Chrome extends PosComponent {
         this.mainScreen = this.state.mainScreen;
         this.mainScreenProps = {};
 
-        this.tempScreen = useState({ isShown: false, name: null, component: null });
-        this.tempScreenProps = {};
-
         useSubEnv({
             pos: reactive(
                 this.env.pos,
@@ -317,14 +313,14 @@ export class Chrome extends PosComponent {
     }
     __showTempScreen(event) {
         const { name, props, resolve } = event.detail;
-        this.tempScreen.isShown = true;
-        this.tempScreen.name = name;
-        this.tempScreen.component = this.constructor.components[name];
-        this.tempScreenProps = Object.assign({}, props, { resolve });
+        this.state.tempScreen = {
+            name,
+            component: this.constructor.components[name],
+            props: { ...props, resolve },
+        };
     }
     __closeTempScreen() {
-        this.tempScreen.isShown = false;
-        this.tempScreen.name = null;
+        this.state.tempScreen = null;
     }
     __showScreen({ detail: { name, props = {} } }) {
         const component = this.constructor.components[name];
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 2fc6a55d518..a12fa990fc0 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -4,7 +4,6 @@
     <t t-name="Chrome" owl="1">
         <div class="pos" t-att-class="{ 'big-scrollbars': state.hasBigScrollBars }">
             <div class="pos-receipt-print"></div>
-            <div t-if="tempScreen.isShown" class="block-top-header" />
             <t t-if="state.uiState === 'READY'">
                 <Navbar showCashMoveButton="showCashMoveButton"/>
                 <div class="pos-content">
@@ -12,10 +11,10 @@
                         <div class="subwindow">
                             <div class="subwindow-container">
                                 <div class="subwindow-container-fix screens">
-                                    <t isShown="!tempScreen.isShown" t-component="mainScreen.component"
+                                    <t isShown="!state.tempScreen" t-component="mainScreen.component"
                                        t-props="mainScreenProps" t-key="mainScreen.name" />
-                                    <t t-if="tempScreen.isShown" t-component="tempScreen.component"
-                                       t-props="tempScreenProps" t-key="tempScreen.name" />
+                                    <t t-if="state.tempScreen" t-component="state.tempScreen.component"
+                                       t-props="state.tempScreen.props" t-key="state.tempScreen.name" />
                                 </div>
                             </div>
                         </div>
diff --git a/addons/pos_hr_restaurant/static/src/js/Chrome.js b/addons/pos_hr_restaurant/static/src/js/Chrome.js
index d2eb1f7a59a..09f5e6b7cdd 100644
--- a/addons/pos_hr_restaurant/static/src/js/Chrome.js
+++ b/addons/pos_hr_restaurant/static/src/js/Chrome.js
@@ -7,7 +7,7 @@ import Registries from '@point_of_sale/js/Registries';
 export const PosHrRestaurantChrome = (Chrome) => class extends Chrome {
     //@override
     _shouldResetIdleTimer() {
-        return super._shouldResetIdleTimer() && this.tempScreen.name !== 'LoginScreen';
+        return super._shouldResetIdleTimer() && this.state.tempScreen?.name !== 'LoginScreen';
     }
 }
 
diff --git a/addons/pos_restaurant/static/src/js/Chrome.js b/addons/pos_restaurant/static/src/js/Chrome.js
index 46bbb8743b7..d8c436ad463 100644
--- a/addons/pos_restaurant/static/src/js/Chrome.js
+++ b/addons/pos_restaurant/static/src/js/Chrome.js
@@ -59,7 +59,7 @@ const PosResChrome = (Chrome) =>
                 this.env.posbus.trigger("close-popups-but-error", { resolve })
             );
             if (isPopupClosed) {
-                if (this.tempScreen.isShown) {
+                if (this.state.tempScreen) {
                     this.trigger("close-temp-screen");
                 }
                 const table = this.env.pos.table;