[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>

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" />

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();
     }

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];

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>

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';
     }
 }
 

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;