[FIX] point_of_sale: crash at startup number_buffer

Previously, the productScreen component used numberBuffer.use(), this
function has been removed in this PR :
- https://github.com/odoo/odoo/pull/112219

This removal causes a crash when in mobile mode. This is because the
productScreen component tries to reset the buffer when it is mounted
with this.numberBuffer.reset().

The problem is that in mobile mode no component initializes the buffer
in productScreen, which causes an error.

Now the number buffer is again initialized in the productScreen
component and not in its children. This solves the problem.

closes odoo/odoo#116457

X-original-commit: d317a7093c07a955abee1979ad8c3235cd16faef
Signed-off-by: Samuel Degueldre <sad@odoo.com>

addons/point_of_sale/static/src/app/number_buffer_service.js

@@ -4,7 +4,7 @@ import { parse } from "web.field_utils";
 import { barcodeService } from "@barcodes/barcode_service";
 import { _t } from "web.core";
 import { registry } from "@web/core/registry";
-import { EventBus, onMounted, onWillUnmount, useComponent, useExternalListener } from "@odoo/owl";
+import { EventBus, onWillDestroy, useComponent, useExternalListener } from "@odoo/owl";
 
 const INPUT_KEYS = new Set(
     ["Delete", "Backspace", "+1", "+2", "+5", "+10", "+20", "+50"].concat(
@@ -133,16 +133,19 @@ class NumberBuffer extends EventBus {
         this.eventsBuffer = [];
         const currentComponent = useComponent();
         config = Object.assign(getDefaultConfig(), config);
-        onMounted(() => {
-            this.bufferHolderStack.push({
-                component: currentComponent,
-                state: config.state ? config.state : { buffer: "", toStartOver: false },
-                config,
-            });
-            this._setUp();
+
+        this.bufferHolderStack.push({
+            component: currentComponent,
+            state: config.state ? config.state : { buffer: "", toStartOver: false },
+            config,
         });
-        onWillUnmount(() => {
-            this.bufferHolderStack.pop();
+        this._setUp();
+        onWillDestroy(() => {
+            const currentComponentName = currentComponent.constructor.name;
+            const indexComponent = this.bufferHolderStack.findIndex(
+                (stack) => stack.component.constructor.name === currentComponentName
+            );
+            this.bufferHolderStack.splice(indexComponent, 1);
             this._setUp();
         });
     }

addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenNumpad.js

@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-
 import { PSNumpadInputButton } from "./PSNumpadInputButton";
 import { Component } from "@odoo/owl";
 

addons/point_of_sale/static/src/js/Screens/ProductScreen/NumpadWidget.js

@@ -16,10 +16,6 @@ export class NumpadWidget extends Component {
     };
     setup() {
         this.numberBuffer = useService("number_buffer");
-        this.numberBuffer.use({
-            triggerAtInput: (event) => this.props.updateSelectedOrderline(event),
-            useWithBarcode: true,
-        });
     }
     get hasPriceControlRights() {
         return (

addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js

@@ -11,14 +11,15 @@ import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { ControlButtonPopup } from "@point_of_sale/js/Popups/ControlButtonPopup";
 import { ConnectionLostError } from "@web/core/network/rpc_service";
 
-import { ActionpadWidget } from "./ActionpadWidget";
+import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component, onMounted, useState } from "@odoo/owl";
+import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
+
 import { MobileOrderWidget } from "../../Misc/MobileOrderWidget";
 import { NumpadWidget } from "./NumpadWidget";
 import { OrderWidget } from "./OrderWidget";
 import { ProductsWidget } from "./ProductsWidget";
-import { usePos } from "@point_of_sale/app/pos_hook";
-import { Component, onMounted, useState } from "@odoo/owl";
-import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
+import { ActionpadWidget } from "./ActionpadWidget";
 
 export class ProductScreen extends ControlButtonsMixin(Component) {
     static template = "ProductScreen";
@@ -38,10 +39,7 @@ export class ProductScreen extends ControlButtonsMixin(Component) {
         this.notification = useService("pos_notification");
         this.numberBuffer = useService("number_buffer");
         onMounted(this.onMounted);
-        // Call `reset` when the `onMounted` callback in `numberBuffer.use` is done.
-        // We don't do this in the `mounted` lifecycle method because it is called before
-        // the callbacks in `onMounted` hook.
-        onMounted(() => this.numberBuffer.reset());
+
         useBarcodeReader({
             product: this._barcodeProductAction,
             weight: this._barcodeProductAction,
@@ -49,9 +47,19 @@ export class ProductScreen extends ControlButtonsMixin(Component) {
             client: this._barcodePartnerAction,
             discount: this._barcodeDiscountAction,
         });
+
         this.state = useState({
             mobile_pane: this.props.mobile_pane || "right",
         });
+
+        // Call `resset` when the `onMounted` callback in `numberBuffer.use` is done.
+        // We don't do this in the `mounted` lifecycle method because it is called before
+        // the callbacks in `onMounted` hook.
+        onMounted(() => this.numberBuffer.reset());
+        this.numberBuffer.use({
+            triggerAtInput: (...args) => this.updateSelectedOrderline(...args),
+            useWithBarcode: true,
+        });
     }
     onMounted() {
         this.pos.openCashControl();