diff --git a/addons/point_of_sale/static/src/app/navbar/navbar.js b/addons/point_of_sale/static/src/app/navbar/navbar.js
index 60ffbbf2670..21cf1d283aa 100644
--- a/addons/point_of_sale/static/src/app/navbar/navbar.js
+++ b/addons/point_of_sale/static/src/app/navbar/navbar.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { usePos } from "@point_of_sale/app/pos_hook";
 import { useService } from "@web/core/utils/hooks";
 
@@ -12,8 +11,9 @@ import { SaleDetailsButton } from "@point_of_sale/js/ChromeWidgets/SaleDetailsBu
 import { SyncNotification } from "@point_of_sale/js/ChromeWidgets/SyncNotification";
 import { CashMovePopup } from "./cash_move_popup/cash_move_popup";
 import { TicketScreen } from "@point_of_sale/js/Screens/TicketScreen/TicketScreen";
+import { Component } from "@odoo/owl";
 
-export class Navbar extends LegacyComponent {
+export class Navbar extends Component {
     static template = "point_of_sale.Navbar";
     static components = {
         // FIXME POSREF remove some of these components
diff --git a/addons/point_of_sale/static/src/app/number_buffer_service.js b/addons/point_of_sale/static/src/app/number_buffer_service.js
index d626f17c714..58e934d4c00 100644
--- a/addons/point_of_sale/static/src/app/number_buffer_service.js
+++ b/addons/point_of_sale/static/src/app/number_buffer_service.js
@@ -1,12 +1,11 @@
 /** @odoo-module */
 
-import { useListener } from "@web/core/utils/hooks";
 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";
 
-const { EventBus, onMounted, onWillUnmount, useComponent, useExternalListener } = owl;
 const INPUT_KEYS = new Set(
     ["Delete", "Backspace", "+1", "+2", "+5", "+10", "+20", "+50"].concat(
         "0123456789+-.,".split("")
@@ -19,7 +18,6 @@ const getDefaultConfig = () => ({
     triggerAtEnter: false,
     triggerAtEsc: false,
     triggerAtInput: false,
-    nonKeyboardInputEvent: false,
     useWithBarcode: false,
 });
 
@@ -124,7 +122,6 @@ class NumberBuffer extends EventBus {
      * @param {String|null} config.triggerAtEnter Event triggered when 'Enter' key is pressed.
      * @param {String|null} config.triggerAtEsc Event triggered when 'Esc' key is pressed.
      * @param {String|null} config.triggerAtInput Event triggered for every accepted input.
-     * @param {String|null} config.nonKeyboardInputEvent Also listen to a non-keyboard input event
      *      that carries a payload of { key }. The key is checked if it is a valid input. If valid,
      *      the number buffer is modified just as it is modified when a keyboard key is pressed.
      * @param {Boolean} config.useWithBarcode Whether this buffer is used with barcode.
@@ -148,10 +145,6 @@ class NumberBuffer extends EventBus {
             this.bufferHolderStack.pop();
             this._setUp();
         });
-        // Add listener that accepts non keyboard inputs
-        if (typeof config.nonKeyboardInputEvent === "string") {
-            useListener(config.nonKeyboardInputEvent, this._onNonKeyboardInput.bind(this));
-        }
     }
     get _currentBufferHolder() {
         return this.bufferHolderStack[this.bufferHolderStack.length - 1];
@@ -172,7 +165,14 @@ class NumberBuffer extends EventBus {
     _onKeyboardInput(event) {
         return this._bufferEvents(this._onInput((event) => event.key))(event);
     }
-    _onNonKeyboardInput(event) {
+    sendKey(key) {
+        const event = new CustomEvent("", {
+            detail: {
+                key: key,
+            },
+        });
+        Object.defineProperty(event, "target", { value: {} });
+
         return this._bufferEvents(this._onInput((event) => event.detail.key))(event);
     }
     _bufferEvents(handler) {
@@ -211,13 +211,13 @@ class NumberBuffer extends EventBus {
     }
     _handleInput(key) {
         if (key === "Enter" && this.config.triggerAtEnter) {
-            this.component.trigger(this.config.triggerAtEnter, this.state);
+            this.config.triggerAtEnter(this.state);
         } else if (key === "Esc" && this.config.triggerAtEsc) {
-            this.component.trigger(this.config.triggerAtEsc, this.state);
+            this.config.triggerAtEsc(this.state);
         } else if (INPUT_KEYS.has(key)) {
             this._updateBuffer(key);
             if (this.config.triggerAtInput) {
-                this.component.trigger(this.config.triggerAtInput, {
+                this.config.triggerAtInput({
                     buffer: this.state.buffer,
                     key,
                 });
diff --git a/addons/point_of_sale/static/src/app/popup/popup_service.js b/addons/point_of_sale/static/src/app/popup/popup_service.js
index 9f1a8acf5d6..1708869e3f3 100644
--- a/addons/point_of_sale/static/src/app/popup/popup_service.js
+++ b/addons/point_of_sale/static/src/app/popup/popup_service.js
@@ -1,13 +1,12 @@
 /** @odoo-module */
 
-import { reactive } from "@odoo/owl";
+import { Component, reactive } from "@odoo/owl";
 import { registry } from "@web/core/registry";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { usePos } from "@point_of_sale/app/pos_hook";
-export class PopupContainer extends LegacyComponent {
+export class PopupContainer extends Component {
     static template = "point_of_sale.PopupContainer";
     setup() {
-        // FIXME POSREF: remove this after LegacyComponent is removed.
+        // FIXME POSREF: remove this when Chrome uses the new env
         this.__owl__.childEnv = usePos().legacyEnv;
     }
 }
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 a86aab625d7..af27060386f 100644
--- a/addons/point_of_sale/static/src/app/pos_store.js
+++ b/addons/point_of_sale/static/src/app/pos_store.js
@@ -4,8 +4,13 @@ import { PosGlobalState } from "@point_of_sale/js/models";
 import { pos_env as legacyEnv } from "@point_of_sale/js/pos_env";
 
 import { registry } from "@web/core/registry";
+import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
 import { reactive, markRaw } from "@odoo/owl";
 import { Reactive } from "@point_of_sale/utils";
+import { identifyError } from "@point_of_sale/app/error_handlers/error_handlers";
+import { ConnectionLostError } from "@web/core/network/rpc_service";
+import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
+import { _t } from "@web/core/l10n/translation";
 
 export class PosStore extends Reactive {
     /** @type {'LOADING' | 'READY' | 'CLOSING'} */
@@ -17,10 +22,12 @@ export class PosStore extends Reactive {
     legacyEnv = legacyEnv;
     globalState = new PosGlobalState({ env: markRaw(legacyEnv) });
 
-    static serviceDependencies = ["popup"];
-    constructor({ popup }) {
+    static serviceDependencies = ["popup", "orm", "number_buffer"];
+    constructor({ popup, orm, number_buffer }) {
         super();
+        this.orm = orm;
         this.popup = popup;
+        this.numberBuffer = number_buffer;
         this.setup();
     }
     // use setup instead of constructor because setup can be patched.
@@ -40,6 +47,207 @@ export class PosStore extends Reactive {
         this.showScreen(screenName);
     }
 
+    connect_to_proxy() {
+        return new Promise((resolve, reject) => {
+            this.globalState.env.barcode_reader.disconnect_from_proxy();
+            this.globalState.loadingSkipButtonIsShown = true;
+            this.globalState.env.proxy
+                .autoconnect({
+                    force_ip: this.globalState.config.proxy_ip || undefined,
+                    progress: function (prog) {},
+                })
+                .then(
+                    () => {
+                        if (this.globalState.config.iface_scan_via_proxy) {
+                            this.globalState.env.barcode_reader.connect_to_proxy();
+                        }
+                        resolve();
+                    },
+                    (statusText, url) => {
+                        // this should reject so that it can be captured when we wait for pos.ready
+                        // in the chrome component.
+                        // then, if it got really rejected, we can show the error.
+                        if (statusText == "error" && window.location.protocol == "https:") {
+                            reject({
+                                title: _t("HTTPS connection to IoT Box failed"),
+                                body: _.str.sprintf(
+                                    _t(
+                                        "Make sure you are using IoT Box v18.12 or higher. Navigate to %s to accept the certificate of your IoT Box."
+                                    ),
+                                    url
+                                ),
+                                popup: "alert",
+                            });
+                        } else {
+                            resolve();
+                        }
+                    }
+                );
+        });
+    }
+
+    async closePos() {
+        // If pos is not properly loaded, we just go back to /web without
+        // doing anything in the order data.
+        if (!this.globalState || this.globalState.db.get_orders().length === 0) {
+            window.location = "/web#action=point_of_sale.action_client_pos_menu";
+        }
+
+        if (this.globalState.db.get_orders().length) {
+            // If there are orders in the db left unsynced, we try to sync.
+            // If sync successful, close without asking.
+            // Otherwise, ask again saying that some orders are not yet synced.
+            try {
+                await this.globalState.push_orders();
+                window.location = "/web#action=point_of_sale.action_client_pos_menu";
+            } catch (error) {
+                console.warn(error);
+                const reason = this.globalState.failed
+                    ? _t(
+                          "Some orders could not be submitted to " +
+                              "the server due to configuration errors. " +
+                              "You can exit the Point of Sale, but do " +
+                              "not close the session before the issue " +
+                              "has been resolved."
+                      )
+                    : _t(
+                          "Some orders could not be submitted to " +
+                              "the server due to internet connection issues. " +
+                              "You can exit the Point of Sale, but do " +
+                              "not close the session before the issue " +
+                              "has been resolved."
+                      );
+                const { confirmed } = await this.popup.add(ConfirmPopup, {
+                    title: _t("Offline Orders"),
+                    body: reason,
+                });
+                if (confirmed) {
+                    // FIXME POSREF setting the location prevents the next render, the loading screen never shows
+                    this.globalState.uiState = "CLOSING";
+                    this.globalState.loadingSkipButtonIsShown = false;
+                    window.location = "/web#action=point_of_sale.action_client_pos_menu";
+                }
+            }
+        }
+    }
+    async closeSession(defaultCashCounted, notes, otherPaymentMethods, payments) {
+        let response;
+
+        if (this.globalState.config.cashControl) {
+            response = await this.orm.call(
+                "pos.session",
+                "post_closing_cash_details"[this.globalState.pos_session.id],
+                {
+                    counted_cash: defaultCashCounted,
+                }
+            );
+
+            if (!response.successful) {
+                return this.handleClosingError(response);
+            }
+        }
+
+        try {
+            await this.orm.call("pos.session", "update_closing_control_state_session", [
+                this.globalState.pos_session.id,
+                notes,
+            ]);
+        } catch (error) {
+            // We have to handle the error manually otherwise the validation check stops the script.
+            // In case of "rescue session", we want to display the next popup with "handleClosingError".
+            // FIXME
+            if (
+                !error.message &&
+                !error.message.data &&
+                error.message.data.message !== "This session is already closed."
+            ) {
+                throw error;
+            }
+        }
+
+        try {
+            const bankPaymentMethodDiffPairs = otherPaymentMethods
+                .filter((pm) => pm.type == "bank")
+                .map((pm) => [pm.id, payments[pm.id].difference]);
+            response = await this.orm.call("pos.session", "close_session_from_ui", [
+                this.globalState.pos_session.id,
+                bankPaymentMethodDiffPairs,
+            ]);
+            if (!response.successful) {
+                return this.handleClosingError(response);
+            }
+            window.location = "/web#action=point_of_sale.action_client_pos_menu";
+        } catch (error) {
+            if (identifyError(error) instanceof ConnectionLostError) {
+                // Cannot redirect to backend when offline, let error handlers show the offline popup
+                // FIXME POSREF: doing this means closing again when online will redo the beginning of the method
+                // although it's impossible to close again because this.closeSessionClicked isn't reset to false
+                // The application state is corrupted.
+                throw error;
+            } else {
+                // FIXME POSREF: why are we catching errors here but not anywhere else in this method?
+                await this.popup.add(ErrorPopup, {
+                    title: _t("Closing session error"),
+                    body: _t(
+                        "An error has occurred when trying to close the session.\n" +
+                            "You will be redirected to the back-end to manually close the session."
+                    ),
+                });
+                window.location = "/web#action=point_of_sale.action_client_pos_menu";
+            }
+        }
+    }
+    async selectPartner() {
+        // FIXME, find order to refund when we are in the ticketscreen.
+        const currentOrder = this.globalState.get_order();
+        if (!currentOrder) {
+            return;
+        }
+        const currentPartner = currentOrder.get_partner();
+        if (currentPartner && currentOrder.getHasRefundLines()) {
+            this.popup.add(ErrorPopup, {
+                title: this.env._t("Can't change customer"),
+                body: _.str.sprintf(
+                    this.env._t(
+                        "This order already has refund lines for %s. We can't change the customer associated to it. Create a new order for the new customer."
+                    ),
+                    currentPartner.name
+                ),
+            });
+            return;
+        }
+        const { confirmed, payload: newPartner } = await this.showTempScreen("PartnerListScreen", {
+            partner: currentPartner,
+        });
+        if (confirmed) {
+            currentOrder.set_partner(newPartner);
+            currentOrder.updatePricelist(newPartner);
+        }
+    }
+    // FIXME: POSREF, method exist only to be overrided
+    async addProductFromUi(product, options) {
+        this.globalState.get_order().add_product(product, options);
+    }
+    async addProductToCurrentOrder(product) {
+        if (Number.isInteger(product)) {
+            product = this.globalState.db.get_product_by_id(product);
+        }
+        const currentOrder = this.globalState.get_order();
+
+        if (!currentOrder) {
+            this.globalState.add_new_order();
+        }
+
+        const options = await product.getAddProductOptions();
+
+        if (!options) {
+            return;
+        }
+
+        // Add the product after having the extra information.
+        this.addProductFromUi(product, options);
+        this.numberBuffer.reset();
+    }
     // FIXME POSREF get rid of temp screens entirely?
     showTempScreen(name, props = {}) {
         return new Promise((resolve) => {
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index 8bbcb4d5db1..ee223a0ae14 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -1,9 +1,8 @@
 /** @odoo-module */
 
 import { loadCSS } from "@web/core/assets";
-import { useListener, useBus, useService } from "@web/core/utils/hooks";
+import { useBus, useService } from "@web/core/utils/hooks";
 import BarcodeParser from "barcodes.BarcodeParser";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { batched } from "@point_of_sale/js/utils";
 import { debounce } from "@web/core/utils/timing";
 import { Transition } from "@web/core/transition";
@@ -18,7 +17,6 @@ import { pos_env as env } from "@point_of_sale/js/pos_env";
 
 import { ErrorTracebackPopup } from "./Popups/ErrorTracebackPopup";
 import { CashOpeningPopup } from "./Popups/CashOpeningPopup";
-import { ConfirmPopup } from "./Popups/ConfirmPopup";
 
 import {
     onMounted,
@@ -27,13 +25,14 @@ import {
     useSubEnv,
     reactive,
     onWillUnmount,
+    Component,
 } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/pos_hook";
 
 /**
  * Chrome is the root component of the PoS App.
  */
-export class Chrome extends LegacyComponent {
+export class Chrome extends Component {
     static template = "Chrome"; // FIXME POSREF namespace templates
     static components = { Transition, MainComponentsContainer, WithEnv, ErrorHandler, Navbar };
     setup() {
@@ -90,9 +89,6 @@ export class Chrome extends LegacyComponent {
 
         super.setup();
         useExternalListener(window, "beforeunload", this._onBeforeUnload);
-        useListener("close-pos", this._closePos);
-        useListener("loading-skip-callback", () => this.env.proxy.stop_searching());
-        useListener("connect-to-proxy", this.connect_to_proxy);
         useBus(this.env.posbus, "start-cash-control", this.openCashControl);
         useService("number_buffer").activate();
 
@@ -157,7 +153,7 @@ export class Chrome extends LegacyComponent {
             await this.env.pos.load_server_data();
             await this.setupBarcodeParser();
             if (this.env.pos.config.use_proxy) {
-                await this.connect_to_proxy();
+                await this.pos.connect_to_proxy();
             }
             // Load the saved `env.pos.toRefundLines` from localStorage when
             // the PosGlobalState is ready.
@@ -252,45 +248,6 @@ export class Chrome extends LegacyComponent {
         return barcode_parser.is_loaded();
     }
 
-    connect_to_proxy() {
-        return new Promise((resolve, reject) => {
-            this.env.barcode_reader.disconnect_from_proxy();
-            this.pos.loadingSkipButtonIsShown = true;
-            this.env.proxy
-                .autoconnect({
-                    force_ip: this.env.pos.config.proxy_ip || undefined,
-                    progress: function (prog) {},
-                })
-                .then(
-                    () => {
-                        if (this.env.pos.config.iface_scan_via_proxy) {
-                            this.env.barcode_reader.connect_to_proxy();
-                        }
-                        resolve();
-                    },
-                    (statusText, url) => {
-                        // this should reject so that it can be captured when we wait for pos.ready
-                        // in the chrome component.
-                        // then, if it got really rejected, we can show the error.
-                        if (statusText == "error" && window.location.protocol == "https:") {
-                            reject({
-                                title: this.env._t("HTTPS connection to IoT Box failed"),
-                                body: _.str.sprintf(
-                                    this.env._t(
-                                        "Make sure you are using IoT Box v18.12 or higher. Navigate to %s to accept the certificate of your IoT Box."
-                                    ),
-                                    url
-                                ),
-                                popup: "alert",
-                            });
-                        } else {
-                            resolve();
-                        }
-                    }
-                );
-        });
-    }
-
     openCashControl() {
         if (this.shouldShowCashControl()) {
             this.popup.add(CashOpeningPopup, { keepBehind: true });
@@ -306,48 +263,7 @@ export class Chrome extends LegacyComponent {
     // EVENT HANDLERS //
 
     async _closePos() {
-        // If pos is not properly loaded, we just go back to /web without
-        // doing anything in the order data.
-        if (!this.env.pos || this.env.pos.db.get_orders().length === 0) {
-            window.location = "/web#action=point_of_sale.action_client_pos_menu";
-        }
-
-        if (this.env.pos.db.get_orders().length) {
-            // If there are orders in the db left unsynced, we try to sync.
-            // If sync successful, close without asking.
-            // Otherwise, ask again saying that some orders are not yet synced.
-            try {
-                await this.env.pos.push_orders();
-                window.location = "/web#action=point_of_sale.action_client_pos_menu";
-            } catch (error) {
-                console.warn(error);
-                const reason = this.env.pos.failed
-                    ? this.env._t(
-                          "Some orders could not be submitted to " +
-                              "the server due to configuration errors. " +
-                              "You can exit the Point of Sale, but do " +
-                              "not close the session before the issue " +
-                              "has been resolved."
-                      )
-                    : this.env._t(
-                          "Some orders could not be submitted to " +
-                              "the server due to internet connection issues. " +
-                              "You can exit the Point of Sale, but do " +
-                              "not close the session before the issue " +
-                              "has been resolved."
-                      );
-                const { confirmed } = await this.popup.add(ConfirmPopup, {
-                    title: this.env._t("Offline Orders"),
-                    body: reason,
-                });
-                if (confirmed) {
-                    // FIXME POSREF setting the location prevents the next render, the loading screen never shows
-                    this.pos.uiState = "CLOSING";
-                    this.pos.loadingSkipButtonIsShown = false;
-                    window.location = "/web#action=point_of_sale.action_client_pos_menu";
-                }
-            }
-        }
+        this.pos.closePos();
     }
     /**
      * Save `env.pos.toRefundLines` in localStorage on beforeunload - closing the
@@ -356,6 +272,10 @@ export class Chrome extends LegacyComponent {
     _onBeforeUnload() {
         this.env.pos.db.save("TO_REFUND_LINES", this.env.pos.toRefundLines);
     }
+    _onSetSyncStatus({ detail: { status, pending } }) {
+        this.env.pos.synch.status = status;
+        this.env.pos.synch.pending = pending;
+    }
 
     // MISC METHODS //
     _preloadImages() {
@@ -416,7 +336,7 @@ export class Chrome extends LegacyComponent {
                         msg.session == this.env.pos.pos_session.id
                     ) {
                         console.info("POS / Session opened in another window. EXITING POS");
-                        this._closePos();
+                        this.closePos();
                     }
                 }
             },
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js b/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
index c65e547db52..78345988cdf 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/CashierName.js
@@ -1,9 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
 // Previously UsernameWidget
-export class CashierName extends LegacyComponent {
+export class CashierName extends Component {
     static template = "CashierName";
 
     get username() {
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/CustomerFacingDisplayButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/CustomerFacingDisplayButton.js
index 17952c0d229..0f99f5d01d0 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/CustomerFacingDisplayButton.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/CustomerFacingDisplayButton.js
@@ -1,10 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component, useState } from "@odoo/owl";
 
-const { useState } = owl;
-
-export class CustomerFacingDisplayButton extends LegacyComponent {
+export class CustomerFacingDisplayButton extends Component {
     static template = "CustomerFacingDisplayButton";
 
     setup() {
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js
index caa535948e4..73374baad11 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/HeaderButton.js
@@ -1,12 +1,12 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useService } from "@web/core/utils/hooks";
 import { ClosePosPopup } from "@point_of_sale/js/Popups/ClosePosPopup";
+import { Component } from "@odoo/owl";
 
 // Previously HeaderButtonWidget
 // This is the close session button
-export class HeaderButton extends LegacyComponent {
+export class HeaderButton extends Component {
     static template = "HeaderButton";
 
     setup() {
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js b/addons/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js
index df3ee3ba304..265bd7b2f04 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/ProxyStatus.js
@@ -1,11 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
-
-const { onMounted, onWillUnmount, useState } = owl;
+import { Component, onMounted, onWillUnmount, useState } from "@odoo/owl";
 
 // Previously ProxyStatusWidget
-export class ProxyStatus extends LegacyComponent {
+export class ProxyStatus extends Component {
     static template = "ProxyStatus";
 
     setup() {
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/SaleDetailsButton.js b/addons/point_of_sale/static/src/js/ChromeWidgets/SaleDetailsButton.js
index 31cdc109311..6e3f53010cc 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/SaleDetailsButton.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/SaleDetailsButton.js
@@ -1,16 +1,17 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useService } from "@web/core/utils/hooks";
 import { renderToString } from "@web/core/utils/render";
 import { ErrorPopup } from "../Popups/ErrorPopup";
+import { Component } from "@odoo/owl";
 
-export class SaleDetailsButton extends LegacyComponent {
+export class SaleDetailsButton extends Component {
     static template = "SaleDetailsButton";
 
     setup() {
         super.setup(...arguments);
         this.popup = useService("popup");
+        this.rpc = useService("rpc");
     }
 
     async onClick() {
diff --git a/addons/point_of_sale/static/src/js/ChromeWidgets/SyncNotification.js b/addons/point_of_sale/static/src/js/ChromeWidgets/SyncNotification.js
index e5dad0f2c32..ce4c91c092d 100644
--- a/addons/point_of_sale/static/src/js/ChromeWidgets/SyncNotification.js
+++ b/addons/point_of_sale/static/src/js/ChromeWidgets/SyncNotification.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class SyncNotification extends LegacyComponent {
+export class SyncNotification extends Component {
     static template = "SyncNotification";
 
     onClick() {
diff --git a/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js b/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js
index 5511053ae4d..1980266cbca 100644
--- a/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js
+++ b/addons/point_of_sale/static/src/js/Misc/AbstractReceiptScreen.js
@@ -1,11 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useService } from "@web/core/utils/hooks";
 import { ConfirmPopup } from "../Popups/ConfirmPopup";
 import { ErrorPopup } from "../Popups/ErrorPopup";
-
-const { useRef } = owl;
+import { Component, useRef } from "@odoo/owl";
 
 /**
  * This relies on the assumption that there is a reference to
@@ -13,7 +11,7 @@ const { useRef } = owl;
  * `order-receipt` in the template of the Component that extends
  * this abstract component.
  */
-export class AbstractReceiptScreen extends LegacyComponent {
+export class AbstractReceiptScreen extends Component {
     setup() {
         super.setup();
         this.orderReceipt = useRef("order-receipt");
diff --git a/addons/point_of_sale/static/src/js/Misc/CurrencyAmount.js b/addons/point_of_sale/static/src/js/Misc/CurrencyAmount.js
index 099d5268ddf..7b27da75337 100644
--- a/addons/point_of_sale/static/src/js/Misc/CurrencyAmount.js
+++ b/addons/point_of_sale/static/src/js/Misc/CurrencyAmount.js
@@ -1,7 +1,7 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class CurrencyAmount extends LegacyComponent {
+export class CurrencyAmount extends Component {
     static template = "CurrencyAmount";
 }
diff --git a/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js b/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js
index 560cfedbb14..153caff7442 100644
--- a/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js
+++ b/addons/point_of_sale/static/src/js/Misc/IndependentToOrderScreen.js
@@ -1,9 +1,9 @@
 /** @odoo-module */
 
+import { Component } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 
-export class IndependentToOrderScreen extends LegacyComponent {
+export class IndependentToOrderScreen extends Component {
     static storeOnOrder = false;
     setup() {
         super.setup(...arguments);
diff --git a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
index 298cc17e0ff..8f215b51b4b 100644
--- a/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
+++ b/addons/point_of_sale/static/src/js/Misc/MobileOrderWidget.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class MobileOrderWidget extends LegacyComponent {
+export class MobileOrderWidget extends Component {
     static template = "MobileOrderWidget";
 
     get order() {
diff --git a/addons/point_of_sale/static/src/js/Misc/SearchBar.js b/addons/point_of_sale/static/src/js/Misc/SearchBar.js
index 3e6586be4bb..b2c5daae81a 100644
--- a/addons/point_of_sale/static/src/js/Misc/SearchBar.js
+++ b/addons/point_of_sale/static/src/js/Misc/SearchBar.js
@@ -1,9 +1,7 @@
 /** @odoo-module */
 
-import { useAutofocus, useListener } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
-
-const { useExternalListener, useState } = owl;
+import { Component, useExternalListener, useState } from "@odoo/owl";
+import { useAutofocus } from "@web/core/utils/hooks";
 
 /**
  * This is a simple configurable search bar component. It has search fields
@@ -23,20 +21,17 @@ const { useExternalListener, useState } = owl;
  *  placeholder: string,
  * }}
  * @emits search @payload { fieldName: string, searchTerm: '' }
- * @emits filter-selected @payload { filter: string }
  *
  * NOTE: The payload of the emitted event is accessible via the `detail`
  * field of the event.
  */
-export class SearchBar extends LegacyComponent {
+export class SearchBar extends Component {
     static template = "point_of_sale.SearchBar";
 
     setup() {
         super.setup();
         useAutofocus();
         useExternalListener(window, "click", this._hideOptions);
-        useListener("click-search-field", this._onClickSearchField);
-        useListener("select-filter", this._onSelectFilter);
         this.filterOptionsList = [...this.props.config.filter.options.keys()];
         this.searchFieldsList = [...this.props.config.searchFields.keys()];
         const defaultSearchFieldId = this.searchFieldsList.indexOf(
@@ -50,9 +45,9 @@ export class SearchBar extends LegacyComponent {
             selectedFilter: this.props.config.defaultFilter || this.filterOptionsList[0],
         });
     }
-    _onSelectFilter({ detail: key }) {
+    _onSelectFilter(key) {
         this.state.selectedFilter = key;
-        this.trigger("filter-selected", { filter: this.state.selectedFilter });
+        this.props.onFilterSelected(this.state.selectedFilter);
     }
     /**
      * When pressing vertical arrow keys, do not move the input cursor.
@@ -83,9 +78,9 @@ export class SearchBar extends LegacyComponent {
     /**
      * Called when a search field is clicked.
      */
-    _onClickSearchField({ detail: fieldName }) {
+    _onClickSearchField(fieldName) {
         this.state.showSearchFields = false;
-        this.trigger("search", { fieldName, searchTerm: this.state.searchInput });
+        this.props.onSearch({ fieldName, searchTerm: this.state.searchInput });
     }
     /**
      * Given an arrow key, return the next selectedSearchFieldId.
diff --git a/addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js b/addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js
index 50a2dd7e547..8916bc1bd45 100644
--- a/addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/AbstractAwaitablePopup.js
@@ -1,7 +1,6 @@
 /** @odoo-module */
 
-import { useExternalListener } from "@odoo/owl";
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component, useExternalListener } from "@odoo/owl";
 
 /**
  * Implement this abstract class by extending it like so:
@@ -28,7 +27,7 @@ import { LegacyComponent } from "@web/legacy/legacy_component";
  * //    otherwise, payload = null
  * ```
  */
-export class AbstractAwaitablePopup extends LegacyComponent {
+export class AbstractAwaitablePopup extends Component {
     setup() {
         super.setup(...arguments);
         useExternalListener(window, "keyup", this._onWindowKeyup);
diff --git a/addons/point_of_sale/static/src/js/Popups/CashOpeningPopup.js b/addons/point_of_sale/static/src/js/Popups/CashOpeningPopup.js
index c96f4489f7e..b04ce829d66 100644
--- a/addons/point_of_sale/static/src/js/Popups/CashOpeningPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/CashOpeningPopup.js
@@ -3,8 +3,7 @@
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { useService } from "@web/core/utils/hooks";
 import { MoneyDetailsPopup } from "./MoneyDetailsPopup";
-
-const { useState } = owl;
+import { useState } from "@odoo/owl";
 
 export class CashOpeningPopup extends AbstractAwaitablePopup {
     static template = "CashOpeningPopup";
@@ -19,6 +18,7 @@ export class CashOpeningPopup extends AbstractAwaitablePopup {
             openingCash: this.env.pos.pos_session.cash_register_balance_start || 0,
         });
         this.popup = useService("popup");
+        this.rpc = useService("rpc");
     }
     //@override
     async confirm() {
diff --git a/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js b/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js
index e5cae0cb6cf..a969276b159 100644
--- a/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/ClosePosPopup.js
@@ -1,16 +1,13 @@
 /** @odoo-module */
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
-import { identifyError } from "@point_of_sale/app/error_handlers/error_handlers";
-import { ConnectionLostError } from "@web/core/network/rpc_service";
 import { SaleDetailsButton } from "../ChromeWidgets/SaleDetailsButton";
 import { ConfirmPopup } from "./ConfirmPopup";
 import { ErrorPopup } from "./ErrorPopup";
 import { MoneyDetailsPopup } from "./MoneyDetailsPopup";
 import { AlertPopup } from "./AlertPopup";
 import { useService } from "@web/core/utils/hooks";
-
-const { useState } = owl;
+import { useState } from "@odoo/owl";
 
 export class ClosePosPopup extends AbstractAwaitablePopup {
     static components = { SaleDetailsButton };
@@ -19,6 +16,7 @@ export class ClosePosPopup extends AbstractAwaitablePopup {
     setup() {
         super.setup();
         this.popup = useService("popup");
+        this.pos = useService("pos");
         this.manualInputCashCount = false;
         this.cashControl = this.env.pos.config.cash_control;
         this.closeSessionClicked = false;
@@ -123,82 +121,25 @@ export class ClosePosPopup extends AbstractAwaitablePopup {
         return true;
     }
     closePos() {
-        this.trigger("close-pos");
+        this.pos.closePos();
     }
     async closeSession() {
         if (!this.closeSessionClicked) {
             this.closeSessionClicked = true;
-            let response;
-            if (this.cashControl) {
-                response = await this.rpc({
-                    model: "pos.session",
-                    method: "post_closing_cash_details",
-                    args: [this.env.pos.pos_session.id],
-                    kwargs: {
-                        counted_cash: this.state.payments[this.defaultCashDetails.id].counted,
-                    },
-                });
-                if (!response.successful) {
-                    return this.handleClosingError(response);
-                }
-            }
 
-            try {
-                await this.rpc({
-                    model: "pos.session",
-                    method: "update_closing_control_state_session",
-                    args: [this.env.pos.pos_session.id, this.state.notes],
-                });
-            } catch (error) {
-                // We have to handle the error manually otherwise the validation check stops the script.
-                // In case of "rescue session", we want to display the next popup with "handleClosingError".
-                // FIXME
-                if (
-                    !error.message &&
-                    !error.message.data &&
-                    error.message.data.message !== "This session is already closed."
-                ) {
-                    throw error;
-                }
-            }
-
-            try {
-                const bankPaymentMethodDiffPairs = this.otherPaymentMethods
-                    .filter((pm) => pm.type == "bank")
-                    .map((pm) => [pm.id, this.state.payments[pm.id].difference]);
-                response = await this.rpc({
-                    model: "pos.session",
-                    method: "close_session_from_ui",
-                    args: [this.env.pos.pos_session.id, bankPaymentMethodDiffPairs],
-                    context: this.env.session.user_context,
-                });
-                if (!response.successful) {
-                    return this.handleClosingError(response);
-                }
-                window.location = "/web#action=point_of_sale.action_client_pos_menu";
-            } catch (error) {
-                if (identifyError(error) instanceof ConnectionLostError) {
-                    // Cannot redirect to backend when offline, let error handlers show the offline popup
-                    // FIXME POSREF: doing this means closing again when online will redo the beginning of the method
-                    // although it's impossible to close again because this.closeSessionClicked isn't reset to false
-                    // The application state is corrupted.
-                    throw error;
-                } else {
-                    // FIXME POSREF: why are we catching errors here but not anywhere else in this method?
-                    await this.popup.add(ErrorPopup, {
-                        title: this.env._t("Closing session error"),
-                        body: this.env._t(
-                            "An error has occurred when trying to close the session.\n" +
-                                "You will be redirected to the back-end to manually close the session."
-                        ),
-                    });
-                    window.location = "/web#action=point_of_sale.action_client_pos_menu";
-                }
-            }
+            const defaultCashCounted = this.env.pos.config.cashControl
+                ? this.state.payments[this.defaultCashDetails.id].counted
+                : 0;
+            this.pos.closeSession(
+                defaultCashCounted,
+                this.state.notes,
+                this.otherPaymentMethods,
+                this.state.payments
+            );
         }
+
         this.closeSessionClicked = false;
     }
-
     async handleClosingError(response) {
         let popupType = "";
         let title = "";
diff --git a/addons/point_of_sale/static/src/js/Popups/DatePickerPopup.js b/addons/point_of_sale/static/src/js/Popups/DatePickerPopup.js
index 98714b62269..e2a32a87db8 100644
--- a/addons/point_of_sale/static/src/js/Popups/DatePickerPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/DatePickerPopup.js
@@ -2,28 +2,26 @@
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { _lt } from "@web/core/l10n/translation";
-
-const { onMounted, useRef, useState } = owl;
+import { onMounted, useRef, useState } from "@odoo/owl";
 
 export class DatePickerPopup extends AbstractAwaitablePopup {
-    static template = 'DatePickerPopup';
+    static template = "DatePickerPopup";
     static defaultProps = {
-        confirmText: _lt('Confirm'),
-        cancelText: _lt('Discard'),
-        title: _lt('DatePicker'),
+        confirmText: _lt("Confirm"),
+        cancelText: _lt("Discard"),
+        title: _lt("DatePicker"),
     };
 
     setup() {
         super.setup();
-        this.state = useState({shippingDate: this._today()});
-        this.inputRef = useRef('input');
+        this.state = useState({ shippingDate: this._today() });
+        this.inputRef = useRef("input");
         onMounted(() => this.inputRef.el.focus());
     }
     getPayload() {
-        return this.state.shippingDate < this._today() ? this._today(): this.state.shippingDate;
+        return this.state.shippingDate < this._today() ? this._today() : this.state.shippingDate;
     }
     _today() {
-        return new Date().toISOString().split('T')[0]
+        return new Date().toISOString().split("T")[0];
     }
-    
 }
diff --git a/addons/point_of_sale/static/src/js/Popups/EditListInput.js b/addons/point_of_sale/static/src/js/Popups/EditListInput.js
index 4cb250b3c8a..951eb2aeae3 100644
--- a/addons/point_of_sale/static/src/js/Popups/EditListInput.js
+++ b/addons/point_of_sale/static/src/js/Popups/EditListInput.js
@@ -1,6 +1,6 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
 /**
  * props {
@@ -9,7 +9,7 @@ import { LegacyComponent } from "@web/legacy/legacy_component";
  *     item: object,
  * }
  */
-export class EditListInput extends LegacyComponent {
+export class EditListInput extends Component {
     static template = "EditListInput";
 
     onKeyup(event) {
diff --git a/addons/point_of_sale/static/src/js/Popups/EditListPopup.js b/addons/point_of_sale/static/src/js/Popups/EditListPopup.js
index 7b36bd90375..b69bf90a56d 100644
--- a/addons/point_of_sale/static/src/js/Popups/EditListPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/EditListPopup.js
@@ -3,11 +3,9 @@
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { useAutoFocusToLast } from "@point_of_sale/js/custom_hooks";
 import { _lt } from "@web/core/l10n/translation";
-
+import { useState } from "@odoo/owl";
 import { EditListInput } from "./EditListInput";
 
-const { useState } = owl;
-
 /**
  * Given a array of { id, text }, we show the user this popup to be able to modify this given array.
  * (used to replace PackLotLinePopupWidget)
diff --git a/addons/point_of_sale/static/src/js/Popups/ErrorTracebackPopup.js b/addons/point_of_sale/static/src/js/Popups/ErrorTracebackPopup.js
index 61212835e59..cd9c3f14bb7 100644
--- a/addons/point_of_sale/static/src/js/Popups/ErrorTracebackPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/ErrorTracebackPopup.js
@@ -2,6 +2,7 @@
 
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { _lt } from "@web/core/l10n/translation";
+import { useService } from "@web/core/utils/hooks";
 
 // formerly ErrorTracebackPopupWidget
 export class ErrorTracebackPopup extends ErrorPopup {
@@ -14,9 +15,12 @@ export class ErrorTracebackPopup extends ErrorPopup {
         body: "",
         exitButtonIsShown: false,
         exitButtonText: _lt("Exit Pos"),
-        exitButtonTrigger: "close-pos",
     };
 
+    setup() {
+        this.pos = useService("pos");
+    }
+
     get tracebackUrl() {
         const blob = new Blob([this.props.body]);
         const URL = window.URL || window.webkitURL;
diff --git a/addons/point_of_sale/static/src/js/Popups/MoneyDetailsPopup.js b/addons/point_of_sale/static/src/js/Popups/MoneyDetailsPopup.js
index 3657d0d5136..e16be77251e 100644
--- a/addons/point_of_sale/static/src/js/Popups/MoneyDetailsPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/MoneyDetailsPopup.js
@@ -1,11 +1,9 @@
 /** @odoo-module */
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
-
+import { useState } from "@odoo/owl";
 import { CurrencyAmount } from "../Misc/CurrencyAmount";
 
-const { useState } = owl;
-
 export class MoneyDetailsPopup extends AbstractAwaitablePopup {
     static components = { CurrencyAmount };
     static template = "MoneyDetailsPopup";
diff --git a/addons/point_of_sale/static/src/js/Popups/NumberPopup.js b/addons/point_of_sale/static/src/js/Popups/NumberPopup.js
index a8ad3bad436..ae90a7d006d 100644
--- a/addons/point_of_sale/static/src/js/Popups/NumberPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/NumberPopup.js
@@ -3,9 +3,8 @@ import core from "web.core";
 var _t = core._t;
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
-import { useListener, useService } from "@web/core/utils/hooks";
-
-const { useState } = owl;
+import { useService } from "@web/core/utils/hooks";
+import { useState } from "@odoo/owl";
 
 export class NumberPopup extends AbstractAwaitablePopup {
     static template = "NumberPopup";
@@ -31,8 +30,6 @@ export class NumberPopup extends AbstractAwaitablePopup {
      */
     setup() {
         super.setup();
-        useListener("accept-input", this.confirm);
-        useListener("close-this-popup", this.cancel);
         let startingBuffer = "";
         if (typeof this.props.startingValue === "number" && this.props.startingValue > 0) {
             startingBuffer = this.props.startingValue
@@ -42,9 +39,8 @@ export class NumberPopup extends AbstractAwaitablePopup {
         this.state = useState({ buffer: startingBuffer, toStartOver: this.props.isInputSelected });
         this.numberBuffer = useService("number_buffer");
         this.numberBuffer.use({
-            nonKeyboardInputEvent: "numpad-click-input",
-            triggerAtEnter: "accept-input",
-            triggerAtEscape: "close-this-popup",
+            triggerAtEnter: () => this.confirm(),
+            triggerAtEscape: () => this.cancel(),
             state: this.state,
         });
     }
@@ -67,7 +63,7 @@ export class NumberPopup extends AbstractAwaitablePopup {
         }
     }
     sendInput(key) {
-        this.trigger("numpad-click-input", { key });
+        this.numberBuffer.sendKey(key);
     }
     getPayload() {
         return this.numberBuffer.get();
diff --git a/addons/point_of_sale/static/src/js/Popups/ProductConfiguratorPopup.js b/addons/point_of_sale/static/src/js/Popups/ProductConfiguratorPopup.js
index 44822142cf2..47f8f4dbd00 100644
--- a/addons/point_of_sale/static/src/js/Popups/ProductConfiguratorPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/ProductConfiguratorPopup.js
@@ -1,10 +1,8 @@
 /** @odoo-module */
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
+import { Component, useRef, useState, useSubEnv } from "@odoo/owl";
 
-const { useState, useSubEnv } = owl;
-
-export class BaseProductAttribute extends LegacyComponent {
+export class BaseProductAttribute extends Component {
     setup() {
         super.setup();
         this.env.attribute_components.push(this);
@@ -38,6 +36,7 @@ export class RadioProductAttribute extends BaseProductAttribute {
 
     setup() {
         super.setup();
+        this.root = useRef("root");
         owl.onMounted(this.onMounted);
     }
     onMounted() {
@@ -45,7 +44,7 @@ export class RadioProductAttribute extends BaseProductAttribute {
         // a matching `value` attribute. In our case, we use `t-att-value` so `value` is
         // not found yet and no radio is selected by default.
         // We then manually select the first input of each radio attribute.
-        $(this.el).find('input[type="radio"]:first').prop("checked", true);
+        this.root.el.querySelector("input[type=radio]").checked = true;
     }
 }
 
diff --git a/addons/point_of_sale/static/src/js/Popups/SelectionPopup.js b/addons/point_of_sale/static/src/js/Popups/SelectionPopup.js
index 57a3b2a9b3b..d6e055e16b3 100644
--- a/addons/point_of_sale/static/src/js/Popups/SelectionPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/SelectionPopup.js
@@ -2,8 +2,7 @@
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { _lt } from "@web/core/l10n/translation";
-
-const { useState } = owl;
+import { useState } from "@odoo/owl";
 
 export class SelectionPopup extends AbstractAwaitablePopup {
     static template = "SelectionPopup";
diff --git a/addons/point_of_sale/static/src/js/Popups/TextAreaPopup.js b/addons/point_of_sale/static/src/js/Popups/TextAreaPopup.js
index 88ec0aa937d..ff72c604770 100644
--- a/addons/point_of_sale/static/src/js/Popups/TextAreaPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/TextAreaPopup.js
@@ -2,8 +2,7 @@
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { _lt } from "@web/core/l10n/translation";
-
-const { onMounted, useRef, useState } = owl;
+import { onMounted, useRef, useState } from "@odoo/owl";
 
 // IMPROVEMENT: This code is very similar to TextInputPopup.
 //      Combining them would reduce the code.
diff --git a/addons/point_of_sale/static/src/js/Popups/TextInputPopup.js b/addons/point_of_sale/static/src/js/Popups/TextInputPopup.js
index 2ab6a397b05..c3350361799 100644
--- a/addons/point_of_sale/static/src/js/Popups/TextInputPopup.js
+++ b/addons/point_of_sale/static/src/js/Popups/TextInputPopup.js
@@ -2,8 +2,7 @@
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { _lt } from "@web/core/l10n/translation";
-
-const { onMounted, useRef, useState } = owl;
+import { onMounted, useRef, useState } from "@odoo/owl";
 
 // formerly TextInputPopupWidget
 export class TextInputPopup extends AbstractAwaitablePopup {
diff --git a/addons/point_of_sale/static/src/js/PosContext.js b/addons/point_of_sale/static/src/js/PosContext.js
index 677ebdad04e..aa6b56e3ba8 100644
--- a/addons/point_of_sale/static/src/js/PosContext.js
+++ b/addons/point_of_sale/static/src/js/PosContext.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
-const { reactive } = owl;
-
+import { reactive } from "@odoo/owl";
 // Create global context objects
 // e.g. component.env.device = new Context({ isMobile: false });
 export const orderManagement = reactive({ searchString: "", selectedOrder: null });
diff --git a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerDetailsEdit.js b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerDetailsEdit.js
index fea447fcd25..c522a9c2899 100644
--- a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerDetailsEdit.js
+++ b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerDetailsEdit.js
@@ -2,13 +2,11 @@
 
 import { _t } from "web.core";
 import { getDataURLFromFile } from "web.utils";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { useService } from "@web/core/utils/hooks";
+import { Component, onMounted, onWillUnmount  } from "@odoo/owl";
 
-const { onMounted, onWillUnmount } = owl;
-
-export class PartnerDetailsEdit extends LegacyComponent {
+export class PartnerDetailsEdit extends Component {
     static template = "PartnerDetailsEdit";
 
     setup() {
@@ -72,7 +70,7 @@ export class PartnerDetailsEdit extends LegacyComponent {
             });
         }
         processedChanges.id = this.props.partner.id || false;
-        this.trigger("save-changes", { processedChanges });
+        this.props.saveChanges(processedChanges);
     }
     async uploadImage(event) {
         const file = event.target.files[0];
diff --git a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerLine.js b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerLine.js
index ae665338648..71e7ce0dbad 100644
--- a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerLine.js
+++ b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerLine.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class PartnerLine extends LegacyComponent {
+export class PartnerLine extends Component {
     static template = "PartnerLine";
 
     get highlight() {
diff --git a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerListScreen.js b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerListScreen.js
index 376f43d2a13..d274850879e 100644
--- a/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerListScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/PartnerListScreen/PartnerListScreen.js
@@ -1,16 +1,14 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 
 import { registry } from "@web/core/registry";
 import { debounce } from "@web/core/utils/timing";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 
 import { PartnerLine } from "./PartnerLine";
 import { PartnerDetailsEdit } from "./PartnerDetailsEdit";
 import { usePos } from "@point_of_sale/app/pos_hook";
-
-const { onWillUnmount, useRef } = owl;
+import { Component, onWillUnmount, useRef } from "@odoo/owl";
 
 /**
  * Render this screen using `showTempScreen` to select partner.
@@ -27,16 +25,15 @@ const { onWillUnmount, useRef } = owl;
  *
  * @props partner - originally selected partner
  */
-export class PartnerListScreen extends LegacyComponent {
+export class PartnerListScreen extends Component {
     static components = { PartnerDetailsEdit, PartnerLine };
     static template = "PartnerListScreen";
 
     setup() {
         super.setup();
         this.pos = usePos();
+        this.rpc = useService("rpc");
         this.notification = useService("pos_notification");
-        useListener("click-save", () => this.env.bus.trigger("save-partner"));
-        useListener("save-changes", this.saveChanges);
         this.searchWordInputRef = useRef("search-word-input-partner");
 
         // We are not using useState here because the object
@@ -159,11 +156,11 @@ export class PartnerListScreen extends LegacyComponent {
         };
         this.activateEditMode();
     }
-    async saveChanges(event) {
+    async saveChanges(processedChanges) {
         const partnerId = await this.rpc({
             model: "res.partner",
             method: "create_from_ui",
-            args: [event.detail.processedChanges],
+            args: [processedChanges],
         });
         await this.env.pos.load_new_partners();
         this.state.selectedPartner = this.env.pos.db.get_partner_by_id(partnerId);
diff --git a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PSNumpadInputButton.js b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PSNumpadInputButton.js
index d2965e66d57..c5c764cb734 100644
--- a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PSNumpadInputButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PSNumpadInputButton.js
@@ -1,10 +1,15 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
 
-export class PSNumpadInputButton extends LegacyComponent {
+export class PSNumpadInputButton extends Component {
     static template = "PSNumpadInputButton";
 
+    setup() {
+        this.numberBuffer = useService("number_buffer");
+    }
+
     get _class() {
         return this.props.changeClassTo || "input-button number-char";
     }
diff --git a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreen.js b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreen.js
index d8e51af6d8b..d78a268977e 100644
--- a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreen.js
@@ -1,10 +1,9 @@
 /** @odoo-module */
 
 import { parse } from "web.field_utils";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useErrorHandlers } from "@point_of_sale/js/custom_hooks";
 import { registry } from "@web/core/registry";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import utils from "web.utils";
 
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
@@ -16,8 +15,9 @@ import { PaymentScreenNumpad } from "./PaymentScreenNumpad";
 import { PaymentScreenPaymentLines } from "./PaymentScreenPaymentLines";
 import { PaymentScreenStatus } from "./PaymentScreenStatus";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
-export class PaymentScreen extends LegacyComponent {
+export class PaymentScreen extends Component {
     static template = "PaymentScreen";
     static components = {
         PaymentScreenNumpad,
@@ -29,16 +29,8 @@ export class PaymentScreen extends LegacyComponent {
         super.setup();
         this.pos = usePos();
         this.popup = useService("popup");
+        this.rpc = useService("rpc");
         this.notification = useService("pos_notification");
-        useListener("delete-payment-line", this.deletePaymentLine);
-        useListener("select-payment-line", this.selectPaymentLine);
-        useListener("new-payment-line", this.addNewPaymentLine);
-        useListener("update-selected-paymentline", this._updateSelectedPaymentline);
-        useListener("send-payment-request", this._sendPaymentRequest);
-        useListener("send-payment-cancel", this._sendPaymentCancel);
-        useListener("send-payment-reverse", this._sendPaymentReverse);
-        useListener("send-force-done", this._sendForceDone);
-        useListener("validate-order", () => this.validateOrder(false));
         this.payment_methods_from_config = this.env.pos.payment_methods.filter((method) =>
             this.env.pos.config.payment_method_ids.includes(method.id)
         );
@@ -59,12 +51,9 @@ export class PaymentScreen extends LegacyComponent {
     }
     get _getNumberBufferConfig() {
         const config = {
-            // The numberBuffer listens to this event to update its state.
-            // Basically means 'update the buffer when this event is triggered'
-            nonKeyboardInputEvent: "input-from-numpad",
             // When the buffer is updated, trigger this event.
             // Note that the component listens to it.
-            triggerAtInput: "update-selected-paymentline",
+            triggerAtInput: () => this.updateSelectedPaymentline(),
         };
         // Check if pos has a cash payment method
         const hasCashPaymentMethod = this.payment_methods_from_config.some(
@@ -102,7 +91,7 @@ export class PaymentScreen extends LegacyComponent {
             this.currentOrder.updatePricelist(newPartner);
         }
     }
-    addNewPaymentLine({ detail: paymentMethod }) {
+    addNewPaymentLine(paymentMethod) {
         // original function: click_paymentmethods
         const result = this.currentOrder.add_paymentline(paymentMethod);
         if (result) {
@@ -116,7 +105,7 @@ export class PaymentScreen extends LegacyComponent {
             return false;
         }
     }
-    _updateSelectedPaymentline() {
+    updateSelectedPaymentline() {
         if (this.paymentLines.every((line) => line.paid)) {
             this.currentOrder.add_paymentline(this.payment_methods_from_config[0]);
         }
@@ -132,7 +121,7 @@ export class PaymentScreen extends LegacyComponent {
             return;
         }
         if (this.numberBuffer.get() === null) {
-            this.deletePaymentLine({ detail: { cid: this.selectedPaymentLine.cid } });
+            this.deletePaymentLine(this.selectedPaymentLine.cid);
         } else {
             this.selectedPaymentLine.set_amount(this.numberBuffer.getFloat());
         }
@@ -173,11 +162,9 @@ export class PaymentScreen extends LegacyComponent {
             this.currentOrder.setShippingDate(false);
         }
     }
-    deletePaymentLine(event) {
+    deletePaymentLine(cid) {
         var self = this;
-        const { cid } = event.detail;
         const line = this.paymentLines.find((line) => line.cid === cid);
-
         // If a paymentline with a payment terminal linked to
         // it is removed, the terminal should get a cancel
         // request.
@@ -196,14 +183,14 @@ export class PaymentScreen extends LegacyComponent {
             this.render(true);
         }
     }
-    selectPaymentLine(event) {
-        const { cid } = event.detail;
+    selectPaymentLine(cid) {
         const line = this.paymentLines.find((line) => line.cid === cid);
         this.currentOrder.select_paymentline(line);
         this.numberBuffer.reset();
         this.render(true);
     }
     async validateOrder(isForceValidate) {
+        this.numberBuffer.capture();
         if (this.env.pos.config.cash_rounding) {
             if (!this.env.pos.get_order().check_paymentlines_rounding()) {
                 this.popup.add(ErrorPopup, {
@@ -467,8 +454,9 @@ export class PaymentScreen extends LegacyComponent {
     async _postPushOrderResolve(order, order_server_ids) {
         return true;
     }
-    async _sendPaymentRequest({ detail: line }) {
+    async sendPaymentRequest(line) {
         // Other payment lines can not be reversed anymore
+        this.numberBuffer.capture();
         this.paymentLines.forEach(function (line) {
             line.can_be_reversed = false;
         });
@@ -490,13 +478,13 @@ export class PaymentScreen extends LegacyComponent {
                 ) &&
                 this.env.pos.config.auto_validate_terminal_payment
             ) {
-                this.trigger("validate-order");
+                this.validateOrder(false);
             }
         } else {
             line.set_payment_status("retry");
         }
     }
-    async _sendPaymentCancel({ detail: line }) {
+    async sendPaymentCancel(line) {
         const payment_terminal = line.payment_method.payment_terminal;
         line.set_payment_status("waitingCancel");
         const isCancelSuccessful = await payment_terminal.send_payment_cancel(
@@ -509,7 +497,7 @@ export class PaymentScreen extends LegacyComponent {
             line.set_payment_status("waitingCard");
         }
     }
-    async _sendPaymentReverse({ detail: line }) {
+    async sendPaymentReverse(line) {
         const payment_terminal = line.payment_method.payment_terminal;
         line.set_payment_status("reversing");
 
@@ -522,7 +510,7 @@ export class PaymentScreen extends LegacyComponent {
             line.set_payment_status("done");
         }
     }
-    async _sendForceDone({ detail: line }) {
+    async sendForceDone(line) {
         line.set_payment_status("done");
     }
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenNumpad.js b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenNumpad.js
index 74fc52b3917..f8d0510ff72 100644
--- a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenNumpad.js
+++ b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenNumpad.js
@@ -1,10 +1,10 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 
 import { PSNumpadInputButton } from "./PSNumpadInputButton";
+import { Component } from "@odoo/owl";
 
-export class PaymentScreenNumpad extends LegacyComponent {
+export class PaymentScreenNumpad extends Component {
     static components = { PSNumpadInputButton };
     static template = "PaymentScreenNumpad";
 
diff --git a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenPaymentLines.js b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenPaymentLines.js
index 2dcd952b2f4..8f1b6274ea2 100644
--- a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenPaymentLines.js
+++ b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenPaymentLines.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class PaymentScreenPaymentLines extends LegacyComponent {
+export class PaymentScreenPaymentLines extends Component {
     static template = "PaymentScreenPaymentLines";
 
     formatLineAmount(paymentline) {
diff --git a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenStatus.js b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenStatus.js
index e50367c2f55..cf604f7c331 100644
--- a/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenStatus.js
+++ b/addons/point_of_sale/static/src/js/Screens/PaymentScreen/PaymentScreenStatus.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class PaymentScreenStatus extends LegacyComponent {
+export class PaymentScreenStatus extends Component {
     static template = "PaymentScreenStatus";
 
     get changeText() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ActionpadWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ActionpadWidget.js
index 31e9fc45d70..2bd9d63250c 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ActionpadWidget.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ActionpadWidget.js
@@ -1,18 +1,21 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
 /**
  * @props partner
- * @emits click-partner
- * @emits click-pay
  */
-export class ActionpadWidget extends LegacyComponent {
+export class ActionpadWidget extends Component {
     static template = "ActionpadWidget";
     static defaultProps = {
         isActionButtonHighlighted: false,
     };
 
+    setup() {
+        this.pos = usePos();
+    }
+
     get isLongName() {
         return this.props.partner && this.props.partner.name.length > 10;
     }
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/CategoryButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/CategoryButton.js
index 4647c292c88..e5d8fa9a5b8 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/CategoryButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/CategoryButton.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class CategoryButton extends LegacyComponent {
+export class CategoryButton extends Component {
     static template = "CategoryButton";
 
     get imageUrl() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.js
index 7fabd760302..f435e22be44 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.js
@@ -1,17 +1,16 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { TextAreaPopup } from "@point_of_sale/js/Popups/TextAreaPopup";
+import { Component } from "@odoo/owl";
 
-export class OrderlineCustomerNoteButton extends LegacyComponent {
+export class OrderlineCustomerNoteButton extends Component {
     static template = "OrderlineCustomerNoteButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
     async onClick() {
         const selectedOrderline = this.env.pos.get_order().get_selected_orderline();
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/ProductInfoButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/ProductInfoButton.js
index cc180c9c88e..5cd793e867a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/ProductInfoButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/ProductInfoButton.js
@@ -1,19 +1,18 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { ProductInfoPopup } from "@point_of_sale/js/Popups/ProductInfoPopup";
+import { Component } from "@odoo/owl";
 
-export class ProductInfoButton extends LegacyComponent {
+export class ProductInfoButton extends Component {
     static template = "ProductInfoButton";
 
     setup() {
         super.setup();
-        useListener("click", this.onClick);
         this.popup = useService("popup");
     }
-    async onClick() {
+    async click() {
         const orderline = this.env.pos.get_order().get_selected_orderline();
         if (orderline) {
             const product = orderline.get_product();
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/RefundButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/RefundButton.js
index 1413e677096..516d0768b8d 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/RefundButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/RefundButton.js
@@ -1,19 +1,17 @@
 /** @odoo-module */
 
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
-export class RefundButton extends LegacyComponent {
+export class RefundButton extends Component {
     static template = "point_of_sale.RefundButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this._onClick);
     }
-    _onClick() {
+    click() {
         const partner = this.env.pos.get_order().get_partner();
         const searchDetails = partner ? { fieldName: "PARTNER", searchTerm: partner.name } : {};
         this.pos.showScreen("TicketScreen", {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.js
index d4cf3e51159..b7525feb1de 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.js
@@ -1,17 +1,16 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
+import { Component } from "@odoo/owl";
 
-export class SetFiscalPositionButton extends LegacyComponent {
+export class SetFiscalPositionButton extends Component {
     static template = "SetFiscalPositionButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
     get currentOrder() {
         return this.env.pos.get_order();
@@ -21,7 +20,7 @@ export class SetFiscalPositionButton extends LegacyComponent {
             ? this.currentOrder.fiscal_position.display_name
             : this.env._t("Tax");
     }
-    async onClick() {
+    async click() {
         const currentFiscalPosition = this.currentOrder.fiscal_position;
         const fiscalPosList = [
             {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetPricelistButton.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetPricelistButton.js
index 4754b9a9065..86ff979bd68 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetPricelistButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ControlButtons/SetPricelistButton.js
@@ -1,17 +1,16 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
+import { Component } from "@odoo/owl";
 
-export class SetPricelistButton extends LegacyComponent {
+export class SetPricelistButton extends Component {
     static template = "SetPricelistButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
     get currentOrder() {
         return this.env.pos.get_order();
@@ -20,7 +19,7 @@ export class SetPricelistButton extends LegacyComponent {
         const order = this.currentOrder;
         return order && order.pricelist ? order.pricelist.display_name : this.env._t("Pricelist");
     }
-    async onClick() {
+    async click() {
         // Create the list to be passed to the SelectionPopup.
         // Pricelist object is passed as item in the list because it
         // is the object that will be returned when the popup is confirmed.
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/NumpadWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/NumpadWidget.js
index f59a1b2fa0c..763b59c7135 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/NumpadWidget.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/NumpadWidget.js
@@ -1,21 +1,26 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { useService } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
 /**
  * @prop {'quantity' | 'price' | 'discount'} activeMode
  * @prop {Array<'quantity' | 'price' | 'discount'>} disabledModes
  * @prop {boolean} disableSign
- * @event set-numpad-mode - triggered when mode button is clicked
- * @event numpad-click-input - triggered when numpad button is clicked
  */
-export class NumpadWidget extends LegacyComponent {
+export class NumpadWidget extends Component {
     static template = "NumpadWidget";
     static defaultProps = {
         disabledModes: [],
         disableSign: false,
     };
-
+    setup() {
+        this.numberBuffer = useService("number_buffer");
+        this.numberBuffer.use({
+            triggerAtInput: (event) => this.props.updateSelectedOrderline(event),
+            useWithBarcode: true,
+        });
+    }
     get hasPriceControlRights() {
         return (
             this.env.pos.cashierHasPriceControlRights() &&
@@ -34,10 +39,12 @@ export class NumpadWidget extends LegacyComponent {
         if (!this.hasManualDiscount && mode === "discount") {
             return;
         }
-        this.trigger("set-numpad-mode", { mode });
+        this.numberBuffer.capture();
+        this.numberBuffer.reset();
+        this.env.pos.numpadMode = mode;
     }
     sendInput(key) {
-        this.trigger("numpad-click-input", { key });
+        this.numberBuffer.sendKey(key);
     }
     get decimalSeparator() {
         return this.env._t.database.parameters.decimal_point;
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderSummary.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderSummary.js
index 31afe6a29e6..9da6a5025be 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderSummary.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderSummary.js
@@ -1,9 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 import { float_is_zero } from "web.utils";
 
-export class OrderSummary extends LegacyComponent {
+export class OrderSummary extends Component {
     static template = "OrderSummary";
 
     getTotal() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js
index 64eeab8c7e7..604692fc88a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js
@@ -1,23 +1,20 @@
 /** @odoo-module */
 
-import { useListener, useService } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { useService } from "@web/core/utils/hooks";
 import { EditListPopup } from "@point_of_sale/js/Popups/EditListPopup";
 
 import { Orderline } from "./Orderline";
 import { OrderSummary } from "./OrderSummary";
+import { Component, useEffect, useRef } from "@odoo/owl";
 
-const { useEffect, useRef } = owl;
-
-export class OrderWidget extends LegacyComponent {
+export class OrderWidget extends Component {
     static components = { Orderline, OrderSummary };
     static template = "OrderWidget";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("select-line", this._selectLine);
-        useListener("edit-pack-lot-lines", this._editPackLotLines);
+        this.numberBuffer = useService("number_buffer");
         this.scrollableRef = useRef("scrollable");
         useEffect(
             () => {
@@ -37,8 +34,9 @@ export class OrderWidget extends LegacyComponent {
     get orderlinesArray() {
         return this.order ? this.order.get_orderlines() : [];
     }
-    _selectLine(event) {
-        this.order.select_orderline(event.detail.orderline);
+    selectLine(orderline) {
+        this.numberBuffer.reset();
+        this.order.select_orderline(orderline);
     }
     // IMPROVEMENT: Might be better to lift this to ProductScreen
     // because there is similar operation when clicking a product.
@@ -47,8 +45,7 @@ export class OrderWidget extends LegacyComponent {
     // to an orderline that has product tracked by lot. Lot tracking (based
     // on the current implementation) requires that 1 item per orderline is
     // allowed.
-    async _editPackLotLines(event) {
-        const orderline = event.detail.orderline;
+    async editPackLotLines(orderline) {
         const isAllowOnlyOneLot = orderline.product.isAllowOnlyOneLot();
         const packLotLinesToEdit = orderline.getPackLotLinesToEdit(isAllowOnlyOneLot);
         const { confirmed, payload } = await this.popup.add(EditListPopup, {
@@ -68,6 +65,6 @@ export class OrderWidget extends LegacyComponent {
 
             orderline.setPackLotLines({ modifiedPackLotLines, newPackLotLines });
         }
-        this.order.select_orderline(event.detail.orderline);
+        this.order.select_orderline(orderline);
     }
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/Orderline.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/Orderline.js
index 704023fb455..e1b96722b1a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/Orderline.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/Orderline.js
@@ -1,15 +1,15 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class Orderline extends LegacyComponent {
+export class Orderline extends Component {
     static template = "Orderline";
 
     selectLine() {
-        this.trigger("select-line", { orderline: this.props.line });
+        this.props.selectLine(this.props.line);
     }
     lotIconClicked() {
-        this.trigger("edit-pack-lot-lines", { orderline: this.props.line });
+        this.props.editPackLotLines(this.props.line);
     }
     get addedClasses() {
         return {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductItem.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductItem.js
index af81c432827..a3ca2c6f67d 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductItem.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductItem.js
@@ -1,10 +1,14 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
+import { usePos } from "@point_of_sale/app/pos_hook";
 
-export class ProductItem extends LegacyComponent {
+export class ProductItem extends Component {
     static template = "ProductItem";
 
+    setup() {
+        this.pos = usePos();
+    }
     /**
      * For accessibility, pressing <space> should be like clicking the product.
      * <enter> is not considered because it conflicts with the barcode.
@@ -13,7 +17,7 @@ export class ProductItem extends LegacyComponent {
      */
     spaceClickProduct(event) {
         if (event.which === 32) {
-            this.trigger("click-product", this.props.product);
+            this.pos.addProductToCurrentOrder(this.props.product);
         }
     }
     get imageUrl() {
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
index c215b787de3..e4533fde4ef 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductScreen.js
@@ -1,14 +1,11 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ControlButtonsMixin } from "@point_of_sale/js/ControlButtonsMixin";
 import { registry } from "@web/core/registry";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { useBarcodeReader } from "@point_of_sale/js/custom_hooks";
 import { parse } from "web.field_utils";
 
-import { ProductConfiguratorPopup } from "@point_of_sale/js/Popups/ProductConfiguratorPopup";
-import { EditListPopup } from "@point_of_sale/js/Popups/EditListPopup";
 import { NumberPopup } from "@point_of_sale/js/Popups/NumberPopup";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { ErrorBarcodePopup } from "@point_of_sale/js/Popups/ErrorBarcodePopup";
@@ -21,10 +18,9 @@ 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";
 
-const { onMounted, useState } = owl;
-
-export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
+export class ProductScreen extends ControlButtonsMixin(Component) {
     static template = "ProductScreen";
     static components = {
         ActionpadWidget,
@@ -38,12 +34,13 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
         super.setup();
         this.pos = usePos();
         this.popup = useService("popup");
-        useListener("update-selected-orderline", this._updateSelectedOrderline);
-        useListener("select-line", this._selectLine);
-        useListener("set-numpad-mode", this._setNumpadMode);
-        useListener("click-product", this._clickProduct);
-        useListener("click-partner", this.onClickPartner);
-        useListener("click-pay", this._onClickPay);
+        this.rpc = useService("rpc");
+        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,
@@ -52,17 +49,6 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
             discount: this._barcodeDiscountAction,
             error: this._barcodeErrorAction,
         });
-        this.numberBuffer = useService("number_buffer");
-        this.numberBuffer.use({
-            nonKeyboardInputEvent: "numpad-click-input",
-            triggerAtInput: "update-selected-orderline",
-            useWithBarcode: true,
-        });
-        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());
         this.state = useState({
             mobile_pane: this.props.mobile_pane || "right",
         });
@@ -75,130 +61,13 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
      * connected scale.
      * @see _onScaleNotAvailable
      */
-    get isScaleAvailable() {
-        return true;
-    }
     get partner() {
         return this.currentOrder ? this.currentOrder.get_partner() : null;
     }
     get currentOrder() {
         return this.env.pos.get_order();
     }
-    async _getAddProductOptions(product, base_code) {
-        let price_extra = 0.0;
-        let draftPackLotLines, weight, description, packLotLinesToEdit;
-
-        if (_.some(product.attribute_line_ids, (id) => id in this.env.pos.attributes_by_ptal_id)) {
-            const attributes = _.map(
-                product.attribute_line_ids,
-                (id) => this.env.pos.attributes_by_ptal_id[id]
-            ).filter((attr) => attr !== undefined);
-            const { confirmed, payload } = await this.popup.add(ProductConfiguratorPopup, {
-                product: product,
-                attributes: attributes,
-            });
-
-            if (confirmed) {
-                description = payload.selected_attributes.join(", ");
-                price_extra += payload.price_extra;
-            } else {
-                return;
-            }
-        }
-
-        // Gather lot information if required.
-        if (
-            ["serial", "lot"].includes(product.tracking) &&
-            (this.env.pos.picking_type.use_create_lots ||
-                this.env.pos.picking_type.use_existing_lots)
-        ) {
-            const isAllowOnlyOneLot = product.isAllowOnlyOneLot();
-            if (isAllowOnlyOneLot) {
-                packLotLinesToEdit = [];
-            } else {
-                const orderline = this.currentOrder
-                    .get_orderlines()
-                    .filter((line) => !line.get_discount())
-                    .find((line) => line.product.id === product.id);
-                if (orderline) {
-                    packLotLinesToEdit = orderline.getPackLotLinesToEdit();
-                } else {
-                    packLotLinesToEdit = [];
-                }
-            }
-            const { confirmed, payload } = await this.popup.add(EditListPopup, {
-                title: this.env._t("Lot/Serial Number(s) Required"),
-                name: product.display_name,
-                isSingleItem: isAllowOnlyOneLot,
-                array: packLotLinesToEdit,
-            });
-            if (confirmed) {
-                // Segregate the old and new packlot lines
-                const modifiedPackLotLines = Object.fromEntries(
-                    payload.newArray.filter((item) => item.id).map((item) => [item.id, item.text])
-                );
-                const newPackLotLines = payload.newArray
-                    .filter((item) => !item.id)
-                    .map((item) => ({ lot_name: item.text }));
-
-                draftPackLotLines = { modifiedPackLotLines, newPackLotLines };
-            } else {
-                // We don't proceed on adding product.
-                return;
-            }
-        }
-
-        // Take the weight if necessary.
-        if (product.to_weight && this.env.pos.config.iface_electronic_scale) {
-            // Show the ScaleScreen to weigh the product.
-            if (this.isScaleAvailable) {
-                const { confirmed, payload } = await this.pos.showTempScreen("ScaleScreen", {
-                    product,
-                });
-                if (confirmed) {
-                    weight = payload.weight;
-                } else {
-                    // do not add the product;
-                    return;
-                }
-            } else {
-                await this._onScaleNotAvailable();
-            }
-        }
-
-        if (base_code && this.env.pos.db.product_packaging_by_barcode[base_code.code]) {
-            weight = this.env.pos.db.product_packaging_by_barcode[base_code.code].qty;
-        }
-
-        return { draftPackLotLines, quantity: weight, description, price_extra };
-    }
-    async _addProduct(product, options) {
-        this.currentOrder.add_product(product, options);
-    }
-    async _clickProduct(event) {
-        if (!this.currentOrder) {
-            this.env.pos.add_new_order();
-        }
-        const product = event.detail;
-        const options = await this._getAddProductOptions(product);
-        // Do not add product if options is undefined.
-        if (!options) {
-            return;
-        }
-        // Add the product after having the extra information.
-        await this._addProduct(product, options);
-        this.numberBuffer.reset();
-    }
-    _setNumpadMode(event) {
-        const { mode } = event.detail;
-        this.numberBuffer.capture();
-        this.numberBuffer.reset();
-        this.env.pos.numpadMode = mode;
-    }
-    _selectLine() {
-        this.numberBuffer.reset();
-    }
-    async _updateSelectedOrderline(event) {
+    async updateSelectedOrderline({ buffer, key }) {
         if (this.env.pos.numpadMode === "quantity" && this.env.pos.disallowLineQuantityChange()) {
             const order = this.env.pos.get_order();
             if (!order.orderlines.length) {
@@ -219,16 +88,15 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
                 });
                 return;
             }
-            const parsedInput = (event.detail.buffer && parse.float(event.detail.buffer)) || 0;
+            const parsedInput = (buffer && parse.float(buffer)) || 0;
             if (lastId != selectedLine.cid) {
                 this._showDecreaseQuantityPopup();
             } else if (currentQuantity < parsedInput) {
-                this._setValue(event.detail.buffer);
+                this._setValue(buffer);
             } else if (parsedInput < currentQuantity) {
                 this._showDecreaseQuantityPopup();
             }
         } else {
-            const { buffer } = event.detail;
             const val = buffer === null ? "remove" : buffer;
             this._setValue(val);
             if (val == "remove") {
@@ -272,9 +140,9 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
                 return this._barcodeErrorAction(code);
             }
         }
-        const options = await this._getAddProductOptions(product, code);
+        const options = await product.getAddProductOptions(code);
         // Do not proceed on adding the product when no options is returned.
-        // This is consistent with _clickProduct.
+        // This is consistent with clickProduct.
         if (!options) {
             return;
         }
@@ -337,12 +205,8 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
             controlButtons: this.controlButtons,
         });
     }
-    /**
-     * override this method to perform procedure if the scale is not available.
-     * @see isScaleAvailable
-     */
-    async _onScaleNotAvailable() {}
     async _showDecreaseQuantityPopup() {
+        this.numberBuffer.reset();
         const { confirmed, payload: inputNumber } = await this.popup.add(NumberPopup, {
             startingValue: 0,
             title: this.env._t("Set the new quantity"),
@@ -370,33 +234,7 @@ export class ProductScreen extends ControlButtonsMixin(LegacyComponent) {
             }
         }
     }
-    async onClickPartner() {
-        // IMPROVEMENT: This code snippet is very similar to selectPartner of PaymentScreen.
-        const currentPartner = this.currentOrder.get_partner();
-        if (currentPartner && this.currentOrder.getHasRefundLines()) {
-            this.popup.add(ErrorPopup, {
-                title: this.env._t("Can't change customer"),
-                body: _.str.sprintf(
-                    this.env._t(
-                        "This order already has refund lines for %s. We can't change the customer associated to it. Create a new order for the new customer."
-                    ),
-                    currentPartner.name
-                ),
-            });
-            return;
-        }
-        const { confirmed, payload: newPartner } = await this.pos.showTempScreen(
-            "PartnerListScreen",
-            {
-                partner: currentPartner,
-            }
-        );
-        if (confirmed) {
-            this.currentOrder.set_partner(newPartner);
-            this.currentOrder.updatePricelist(newPartner);
-        }
-    }
-    async _onClickPay() {
+    async onClickPay() {
         if (
             this.env.pos
                 .get_order()
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
index d4fb237c6ab..bc868dff6e2 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidget.js
@@ -1,15 +1,12 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
-import { useListener } from "@web/core/utils/hooks";
 import { usePos } from "@point_of_sale/app/pos_hook";
 
 import { ProductItem } from "./ProductItem";
 import { ProductsWidgetControlPanel } from "./ProductsWidgetControlPanel";
+import { Component, useState } from "@odoo/owl";
 
-const { useState } = owl;
-
-export class ProductsWidget extends LegacyComponent {
+export class ProductsWidget extends Component {
     static components = { ProductItem, ProductsWidgetControlPanel };
     static template = "ProductsWidget";
 
@@ -19,10 +16,6 @@ export class ProductsWidget extends LegacyComponent {
      */
     setup() {
         super.setup();
-        useListener("switch-category", this._switchCategory);
-        useListener("update-search", this._updateSearch);
-        useListener("clear-search", this._clearSearch);
-        useListener("update-product-list", this._updateProductList);
         this.state = useState({ searchWord: "" });
         this.pos = usePos();
     }
@@ -66,17 +59,17 @@ export class ProductsWidget extends LegacyComponent {
     get shouldShowButton() {
         return this.productsToDisplay.length === 0 && this.searchWord;
     }
-    _switchCategory(event) {
-        this.env.pos.setSelectedCategoryId(event.detail);
+    switchCategory(categoryId) {
+        this.env.pos.setSelectedCategoryId(categoryId);
     }
-    _updateSearch(event) {
-        this.state.searchWord = event.detail;
+    updateSearch(searchWord) {
+        this.state.searchWord = searchWord;
     }
-    _clearSearch() {
+    clearSearch() {
         this.state.searchWord = "";
     }
-    _updateProductList(event) {
+    updateProductList(event) {
         this.render(true);
-        this.trigger("switch-category", 0);
+        this.switchCategory(0);
     }
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
index cfe5f5cbe88..4ba1b6cdfbd 100644
--- a/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
+++ b/addons/point_of_sale/static/src/js/Screens/ProductScreen/ProductsWidgetControlPanel.js
@@ -1,15 +1,14 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { debounce } from "@web/core/utils/timing";
 import { usePos } from "@point_of_sale/app/pos_hook";
 
 import { CategoryButton } from "./CategoryButton";
 
-import { onMounted, onWillUnmount, useState } from "@odoo/owl";
+import { Component, onMounted, onWillUnmount, useState } from "@odoo/owl";
 import { useService } from "@web/core/utils/hooks";
 
-export class ProductsWidgetControlPanel extends LegacyComponent {
+export class ProductsWidgetControlPanel extends Component {
     static components = { CategoryButton };
     static template = "ProductsWidgetControlPanel";
 
@@ -17,6 +16,7 @@ export class ProductsWidgetControlPanel extends LegacyComponent {
         super.setup();
         this.pos = usePos();
         this.notification = useService("pos_notification");
+        this.rpc = useService("rpc");
         this.updateSearch = debounce(this.updateSearch, 100);
         this.state = useState({ searchInput: "", mobileSearchBarIsShown: false });
 
@@ -33,7 +33,7 @@ export class ProductsWidgetControlPanel extends LegacyComponent {
     }
     _clearSearch() {
         this.state.searchInput = "";
-        this.trigger("clear-search");
+        this.props.clearSearch();
     }
     get displayCategImages() {
         return (
@@ -42,7 +42,7 @@ export class ProductsWidgetControlPanel extends LegacyComponent {
         );
     }
     updateSearch(event) {
-        this.trigger("update-search", this.state.searchInput);
+        this.props.updateSearch(this.state.searchInput);
         if (event.key === "Enter") {
             this._onPressEnterKey();
         }
@@ -63,8 +63,8 @@ export class ProductsWidgetControlPanel extends LegacyComponent {
     }
     searchProductFromInfo(productName) {
         this.state.searchInput = productName;
-        this.trigger("switch-category", 0);
-        this.trigger("update-search", productName);
+        this.props.switchCategory(0);
+        this.props.updateSearch(productName);
     }
     async loadProductFromDB() {
         if (!this.state.searchInput) {
@@ -90,7 +90,7 @@ export class ProductsWidgetControlPanel extends LegacyComponent {
         if (ProductIds.length) {
             await this.env.pos._addProducts(ProductIds, false);
         }
-        this.trigger("update-product-list");
+        this.props.updateProductList();
         return ProductIds;
     }
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js
index 255c39babed..b911c366bac 100644
--- a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js
+++ b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/OrderReceipt.js
@@ -1,12 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
-
 import { WrappedProductNameLines } from "./WrappedProductNameLines";
+import { Component, onWillUpdateProps } from "@odoo/owl";
 
-const { onWillUpdateProps } = owl;
-
-export class OrderReceipt extends LegacyComponent {
+export class OrderReceipt extends Component {
     static components = { WrappedProductNameLines };
     static template = "OrderReceipt";
 
diff --git a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
index 672091990b8..1594c9b149a 100644
--- a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/ReceiptScreen.js
@@ -9,6 +9,7 @@ import { registry } from "@web/core/registry";
 import { OrderReceipt } from "./OrderReceipt";
 import { onMounted, useRef, status } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { useService } from "@web/core/utils/hooks";
 
 export class ReceiptScreen extends AbstractReceiptScreen {
     static template = "ReceiptScreen";
@@ -18,6 +19,7 @@ export class ReceiptScreen extends AbstractReceiptScreen {
         super.setup();
         this.pos = usePos();
         useErrorHandlers();
+        this.rpc = useService("rpc");
         this.orderReceipt = useRef("order-receipt");
         this.currentOrder = this.env.pos.get_order();
         const partner = this.currentOrder.get_partner();
diff --git a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js
index 7613b06b12b..d718118777e 100644
--- a/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js
+++ b/addons/point_of_sale/static/src/js/Screens/ReceiptScreen/WrappedProductNameLines.js
@@ -1,7 +1,7 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class WrappedProductNameLines extends LegacyComponent {
+export class WrappedProductNameLines extends Component {
     static template = "WrappedProductNameLines";
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/ScaleScreen/ScaleScreen.js b/addons/point_of_sale/static/src/js/Screens/ScaleScreen/ScaleScreen.js
index abe61c6c11c..1bc040c2d03 100644
--- a/addons/point_of_sale/static/src/js/Screens/ScaleScreen/ScaleScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/ScaleScreen/ScaleScreen.js
@@ -1,13 +1,11 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { round_precision as round_pr } from "web.utils";
 import { registry } from "@web/core/registry";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component, onMounted, onWillUnmount, useExternalListener, useState } from "@odoo/owl";
 
-const { onMounted, onWillUnmount, useExternalListener, useState } = owl;
-
-export class ScaleScreen extends LegacyComponent {
+export class ScaleScreen extends Component {
     static template = "ScaleScreen";
 
     /**
diff --git a/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/InvoiceButton.js b/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/InvoiceButton.js
index b25a2663db5..8cd58bdbf38 100644
--- a/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/InvoiceButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/InvoiceButton.js
@@ -1,19 +1,20 @@
 /** @odoo-module */
 
-import { useListener, useService } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { useService } from "@web/core/utils/hooks";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component, useRef } from "@odoo/owl";
 
-export class InvoiceButton extends LegacyComponent {
+export class InvoiceButton extends Component {
     static template = "InvoiceButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
+        this.invoiceButton = useRef("invoice-button");
         this.popup = useService("popup");
-        useListener("click", this._onClick);
+        this.rpc = useService("rpc");
     }
     get isAlreadyInvoiced() {
         if (!this.props.order) {
@@ -110,14 +111,14 @@ export class InvoiceButton extends LegacyComponent {
 
         // Part 3: Download invoice.
         await this._downloadInvoice(orderId);
-        this.trigger("order-invoiced", orderId);
+        this.props.onInvoiceOrder(orderId);
     }
-    async _onClick() {
+    async click() {
         try {
-            this.el.style.pointerEvents = "none";
+            this.invoiceButton.el.style.pointerEvents = "none";
             await this._invoiceOrder();
         } finally {
-            this.el.style.pointerEvents = "auto";
+            this.invoiceButton.el.style.pointerEvents = "auto";
         }
     }
 }
diff --git a/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.js b/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.js
index eecba47f6bd..68fb68bc0ae 100644
--- a/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.js
+++ b/addons/point_of_sale/static/src/js/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.js
@@ -1,18 +1,16 @@
 /** @odoo-module */
 
-import { useListener } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
-export class ReprintReceiptButton extends LegacyComponent {
+export class ReprintReceiptButton extends Component {
     static template = "ReprintReceiptButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this._onClick);
     }
-    async _onClick() {
+    async click() {
         if (!this.props.order) {
             return;
         }
diff --git a/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderDetails.js b/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderDetails.js
index 045fe19f260..0b81b928cd8 100644
--- a/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderDetails.js
+++ b/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderDetails.js
@@ -1,12 +1,12 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { OrderlineDetails } from "./OrderlineDetails";
+import { Component } from "@odoo/owl";
 
 /**
  * @props {models.Order} order
  */
-export class OrderDetails extends LegacyComponent {
+export class OrderDetails extends Component {
     static components = { OrderlineDetails };
     static template = "OrderDetails";
 
diff --git a/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderlineDetails.js b/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderlineDetails.js
index 5fae44f44d4..d9f9bc1f399 100644
--- a/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderlineDetails.js
+++ b/addons/point_of_sale/static/src/js/Screens/TicketScreen/OrderlineDetails.js
@@ -1,13 +1,13 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 import { format } from "web.field_utils";
 import { round_precision as round_pr } from "web.utils";
 
 /**
  * @props {pos.order.line} line
  */
-export class OrderlineDetails extends LegacyComponent {
+export class OrderlineDetails extends Component {
     static template = "OrderlineDetails";
 
     get line() {
diff --git a/addons/point_of_sale/static/src/js/Screens/TicketScreen/TicketScreen.js b/addons/point_of_sale/static/src/js/Screens/TicketScreen/TicketScreen.js
index 7cf5db954f2..42f23af210d 100644
--- a/addons/point_of_sale/static/src/js/Screens/TicketScreen/TicketScreen.js
+++ b/addons/point_of_sale/static/src/js/Screens/TicketScreen/TicketScreen.js
@@ -3,7 +3,7 @@
 import { Order } from "@point_of_sale/js/models";
 import { IndependentToOrderScreen } from "@point_of_sale/js/Misc/IndependentToOrderScreen";
 import { registry } from "@web/core/registry";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { parse } from "web.field_utils";
 
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
@@ -42,22 +42,10 @@ export class TicketScreen extends IndependentToOrderScreen {
         super.setup();
         this.pos = usePos();
         this.popup = useService("popup");
-        useListener("filter-selected", this._onFilterSelected);
-        useListener("search", this._onSearch);
-        useListener("click-order", this._onClickOrder);
-        useListener("create-new-order", this._onCreateNewOrder);
-        useListener("delete-order", this._onDeleteOrder);
-        useListener("next-page", this._onNextPage);
-        useListener("prev-page", this._onPrevPage);
-        useListener("order-invoiced", this._onInvoiceOrder);
-        useListener("click-order-line", this._onClickOrderline);
-        useListener("click-refund-order-uid", this._onClickRefundOrderUid);
-        useListener("update-selected-orderline", this._onUpdateSelectedOrderline);
-        useListener("do-refund", this._onDoRefund);
+        this.rpc = useService("rpc");
         this.numberBuffer = useService("number_buffer");
         this.numberBuffer.use({
-            nonKeyboardInputEvent: "numpad-click-input",
-            triggerAtInput: "update-selected-orderline",
+            triggerAtInput: (event) => this._onUpdateSelectedOrderline(event),
         });
         this._state = this.env.pos.TICKET_SCREEN_STATE;
         this.state = useState({
@@ -73,33 +61,39 @@ export class TicketScreen extends IndependentToOrderScreen {
               };
         Object.assign(this._state.ui, defaultUIState, this.props.ui || {});
 
-        onMounted(() => {
-            this._onFilterSelected({ detail: { filter: this._state.ui.filter } });
-        });
-        onWillUnmount(() => {
-            /**
-             * Automatically create new order when there is no currently active order.
-             * Important in fiscal modules to keep the sequence of the orders.
-             */
-            if (this.env.pos.orders.length == 0 && this.allowNewOrders) {
-                this.env.pos.add_new_order();
-            }
+        onMounted(this.onMounted);
+        onWillUnmount(this.onWillUnmount);
+    }
+    //#region LIFECYCLE METHODS
+    onMounted() {
+        this.env.posbus.on("ticket-button-clicked", this, this.close);
+        setTimeout(() => {
+            // Show updated list of synced orders when going back to the screen.
+            this.onFilterSelected(this._state.ui.filter);
         });
     }
-    async _onFilterSelected(event) {
-        this._state.ui.filter = event.detail.filter;
+    onWillUnmount() {
+        this.env.posbus.off("ticket-button-clicked", this);
+    }
+    //#endregion
+    //#region EVENT HANDLERS
+    onCloseScreen() {
+        this.close();
+    }
+    async onFilterSelected(selectedFilter) {
+        this._state.ui.filter = selectedFilter;
         if (this._state.ui.filter == "SYNCED") {
             await this._fetchSyncedOrders();
         }
     }
-    async _onSearch(event) {
-        Object.assign(this._state.ui.searchDetails, event.detail);
+    async onSearch(search) {
+        Object.assign(this._state.ui.searchDetails, search);
         if (this._state.ui.filter == "SYNCED") {
             this._state.syncedOrders.currentPage = 1;
             await this._fetchSyncedOrders();
         }
     }
-    _onClickOrder({ detail: clickedOrder }) {
+    onClickOrder(clickedOrder) {
         if (!clickedOrder || clickedOrder.locked) {
             if (this._state.ui.selectedSyncedOrderId == clickedOrder.backendId) {
                 this._state.ui.selectedSyncedOrderId = null;
@@ -118,7 +112,7 @@ export class TicketScreen extends IndependentToOrderScreen {
             this._setOrder(clickedOrder);
         }
     }
-    _onCreateNewOrder() {
+    onCreateNewOrder() {
         this.env.pos.add_new_order();
         this.pos.showScreen("ProductScreen");
     }
@@ -129,7 +123,7 @@ export class TicketScreen extends IndependentToOrderScreen {
             orderList[currentOrderIndex + 1] || orderList[currentOrderIndex - 1]
         );
     }
-    async _onDeleteOrder({ detail: order }) {
+    async onDeleteOrder(order) {
         const screen = order.get_screen_data();
         if (
             ["ProductScreen", "PaymentScreen"].includes(screen.name) &&
@@ -156,36 +150,35 @@ export class TicketScreen extends IndependentToOrderScreen {
             this.env.pos.removeOrder(order);
         }
     }
-    async _onNextPage() {
+    async onNextPage() {
         if (this._state.syncedOrders.currentPage < this._getLastPage()) {
             this._state.syncedOrders.currentPage += 1;
             await this._fetchSyncedOrders();
         }
     }
-    async _onPrevPage() {
+    async onPrevPage() {
         if (this._state.syncedOrders.currentPage > 1) {
             this._state.syncedOrders.currentPage -= 1;
             await this._fetchSyncedOrders();
         }
     }
-    async _onInvoiceOrder({ detail: orderId }) {
+    async onInvoiceOrder(orderId) {
         this.env.pos._invalidateSyncedOrdersCache([orderId]);
         await this._fetchSyncedOrders();
     }
-    _onClickOrderline({ detail: orderline }) {
+    onClickOrderline(orderline) {
         const order = this.getSelectedSyncedOrder();
         this._state.ui.selectedOrderlineIds[order.backendId] = orderline.id;
         this.numberBuffer.reset();
     }
-    _onClickRefundOrderUid({ detail: orderUid }) {
+    onClickRefundOrderUid(orderUid) {
         // Open the refund order.
         const refundOrder = this.env.pos.orders.find((order) => order.uid == orderUid);
         if (refundOrder) {
             this._setOrder(refundOrder);
         }
     }
-    _onUpdateSelectedOrderline({ detail }) {
-        const buffer = detail.buffer;
+    _onUpdateSelectedOrderline({ key, buffer }) {
         const order = this.getSelectedSyncedOrder();
         if (!order) {
             return this.numberBuffer.reset();
@@ -229,7 +222,7 @@ export class TicketScreen extends IndependentToOrderScreen {
             }
         }
     }
-    async _onDoRefund() {
+    async onDoRefund() {
         const order = this.getSelectedSyncedOrder();
 
         if (this._doesOrderHaveSoleItem(order)) {
@@ -278,8 +271,10 @@ export class TicketScreen extends IndependentToOrderScreen {
             this.env.pos.set_order(destinationOrder);
         }
 
-        this.close();
+        this.onCloseScreen();
     }
+    //#endregion
+    //#region PUBLIC METHODS
     getSelectedSyncedOrder() {
         if (this._state.ui.filter == "SYNCED") {
             return this._state.syncedOrders.cache[this._state.ui.selectedSyncedOrderId];
diff --git a/addons/point_of_sale/static/src/js/custom_hooks.js b/addons/point_of_sale/static/src/js/custom_hooks.js
index 036c897b776..4db00c0b8f1 100644
--- a/addons/point_of_sale/static/src/js/custom_hooks.js
+++ b/addons/point_of_sale/static/src/js/custom_hooks.js
@@ -3,9 +3,7 @@ import { OfflineErrorPopup } from "./Popups/OfflineErrorPopup";
 import { ConfirmPopup } from "./Popups/ConfirmPopup";
 import { ErrorTracebackPopup } from "./Popups/ErrorTracebackPopup";
 import { ErrorPopup } from "./Popups/ErrorPopup";
-import { useEnv } from "@odoo/owl";
-
-const { onMounted, onPatched, onWillUnmount, useComponent } = owl;
+import { useEnv, onMounted, onPatched, onWillUnmount, useComponent } from "@odoo/owl";
 
 /**
  * Introduce error handlers in the component.
diff --git a/addons/point_of_sale/static/src/js/models.js b/addons/point_of_sale/static/src/js/models.js
index 44ef48be33c..77e54e569d5 100644
--- a/addons/point_of_sale/static/src/js/models.js
+++ b/addons/point_of_sale/static/src/js/models.js
@@ -9,14 +9,15 @@ import time from "web.time";
 import utils from "web.utils";
 import { batched, uuidv4 } from "@point_of_sale/js/utils";
 import { ErrorPopup } from "./Popups/ErrorPopup";
+import { ProductConfiguratorPopup } from "@point_of_sale/js/Popups/ProductConfiguratorPopup";
+import { EditListPopup } from "@point_of_sale/js/Popups/EditListPopup";
+import { markRaw, reactive } from "@odoo/owl";
 
 var QWeb = core.qweb;
 var _t = core._t;
 var round_di = utils.round_decimals;
 var round_pr = utils.round_precision;
-const Markup = utils.Markup
-
-const { markRaw, reactive } = owl;
+const Markup = utils.Markup;
 
 // Container of the product images fetched during rendering
 // of customer display. There is no need to observe it, thus,
@@ -1201,7 +1202,8 @@ export class PosGlobalState extends PosModel {
                     } else if (tax.amount_type === "division") {
                         incl_division_amount += tax.amount * tax.sum_repartition_factor;
                     } else if (tax.amount_type === "fixed") {
-                        incl_fixed_amount += Math.abs(quantity) * tax.amount * tax.sum_repartition_factor;
+                        incl_fixed_amount +=
+                            Math.abs(quantity) * tax.amount * tax.sum_repartition_factor;
                     } else {
                         var tax_amount = self._compute_all(tax, base, quantity);
                         incl_fixed_amount += tax_amount;
@@ -1252,7 +1254,10 @@ export class PosGlobalState extends PosModel {
             }
 
             tax_amount = round_pr(tax_amount, currency_rounding);
-            var factorized_tax_amount = round_pr(tax_amount * tax.sum_repartition_factor, currency_rounding)
+            var factorized_tax_amount = round_pr(
+                tax_amount * tax.sum_repartition_factor,
+                currency_rounding
+            );
 
             if (tax.price_include && total_included_checkpoints[i] === undefined) {
                 cumulated_tax_included_amount += factorized_tax_amount;
@@ -1476,6 +1481,103 @@ export class Product extends PosModel {
         }
         return this.pos.units_by_id[unit_id];
     }
+    async _onScaleNotAvailable() {}
+    get isScaleAvailable() {
+        return true;
+    }
+    async getAddProductOptions(base_code) {
+        let price_extra = 0.0;
+        let draftPackLotLines, weight, description, packLotLinesToEdit;
+
+        if (_.some(this.attribute_line_ids, (id) => id in this.pos.attributes_by_ptal_id)) {
+            const attributes = _.map(
+                this.attribute_line_ids,
+                (id) => this.pos.attributes_by_ptal_id[id]
+            ).filter((attr) => attr !== undefined);
+            const { confirmed, payload } = await this.pos.env.services.popup.add(
+                ProductConfiguratorPopup,
+                {
+                    product: this,
+                    attributes: attributes,
+                }
+            );
+
+            if (confirmed) {
+                description = payload.selected_attributes.join(", ");
+                price_extra += payload.price_extra;
+            } else {
+                return;
+            }
+        }
+        // Gather lot information if required.
+        if (
+            ["serial", "lot"].includes(this.tracking) &&
+            (this.pos.picking_type.use_create_lots || this.pos.picking_type.use_existing_lots)
+        ) {
+            const isAllowOnlyOneLot = this.isAllowOnlyOneLot();
+            if (isAllowOnlyOneLot) {
+                packLotLinesToEdit = [];
+            } else {
+                const orderline = this.currentOrder
+                    .get_orderlines()
+                    .filter((line) => !line.get_discount())
+                    .find((line) => line.product.id === this.id);
+                if (orderline) {
+                    packLotLinesToEdit = orderline.getPackLotLinesToEdit();
+                } else {
+                    packLotLinesToEdit = [];
+                }
+            }
+            const { confirmed, payload } = await this.pos.env.services.popup.add(EditListPopup, {
+                title: this.pos.env._t("Lot/Serial Number(s) Required"),
+                name: this.display_name,
+                isSingleItem: isAllowOnlyOneLot,
+                array: packLotLinesToEdit,
+            });
+            if (confirmed) {
+                // Segregate the old and new packlot lines
+                const modifiedPackLotLines = Object.fromEntries(
+                    payload.newArray.filter((item) => item.id).map((item) => [item.id, item.text])
+                );
+                const newPackLotLines = payload.newArray
+                    .filter((item) => !item.id)
+                    .map((item) => ({ lot_name: item.text }));
+
+                draftPackLotLines = { modifiedPackLotLines, newPackLotLines };
+            } else {
+                // We don't proceed on adding product.
+                return;
+            }
+        }
+
+        // Take the weight if necessary.
+        if (this.to_weight && this.pos.config.iface_electronic_scale) {
+            // Show the ScaleScreen to weigh the product.
+            if (this.isScaleAvailable) {
+                const product = this;
+                const { confirmed, payload } = await this.pos.env.services.pos.showTempScreen(
+                    "ScaleScreen",
+                    {
+                        product,
+                    }
+                );
+                if (confirmed) {
+                    weight = payload.weight;
+                } else {
+                    // do not add the product;
+                    return;
+                }
+            } else {
+                await this._onScaleNotAvailable();
+            }
+        }
+
+        if (base_code && this.pos.db.product_packaging_by_barcode[base_code.code]) {
+            weight = this.pos.db.product_packaging_by_barcode[base_code.code].qty;
+        }
+
+        return { draftPackLotLines, quantity: weight, description, price_extra };
+    }
     // Port of _get_product_price on product.pricelist.
     //
     // Anything related to UOM can be ignored, the POS will always use
@@ -2995,7 +3097,7 @@ export class Order extends PosModel {
         line.set_unit_price(line.compute_fixed_price(line.price));
     }
 
-    add_product(product, options) {
+    async add_product(product, options) {
         if (this._printed) {
             // when adding product with a barcode while being in receipt screen
             this.pos.removeOrder(this);
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 5ac17ee3615..0a2c6146e50 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -33,7 +33,7 @@
                         <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                         <t t-if="pos.loadingSkipButtonIsShown">
                             <h1 class="message">Connecting to devices</h1>
-                            <div class="button skip" t-on-click="() => this.trigger('loading-skip-callback')">
+                            <div class="button skip" t-on-click="() => this.env.proxy.stop_searching()">
                                 Skip
                             </div>
                         </t>
diff --git a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
index 0f5841297aa..cad9e75e362 100644
--- a/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Misc/MobileOrderWidget.xml
@@ -3,7 +3,7 @@
 
     <t t-name="MobileOrderWidget" owl="1">
         <div class="switchpane">
-            <button class="btn-switchpane" t-on-click="() => this.trigger('click-pay')">
+            <button class="btn-switchpane" t-on-click="() => this.props.clickPay()">
                 <h1>Pay</h1>
                 <span><t t-esc="total" /></span>
             </button>
diff --git a/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
index 50c8e882742..64588631a56 100644
--- a/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
+++ b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
@@ -11,7 +11,7 @@
                     <ul>
                         <t t-foreach="searchFieldsList" t-as="fieldName" t-key="fieldName">
                             <li t-att-class="{ highlight: fieldName == searchFieldsList[state.selectedSearchFieldId] }"
-                                t-on-click="() => this.trigger('click-search-field', fieldName)">
+                                t-on-click="() => this._onClickSearchField(fieldName)">
                                 <span class="field">
                                     <t t-esc="props.config.searchFields.get(fieldName)"></t>
                                 </span>
@@ -35,7 +35,7 @@
                 <ul t-if="state.showFilterOptions" class="options">
                     <t t-foreach="filterOptionsList" t-as="key" t-key="key">
                         <t t-set="_option" t-value="props.config.filter.options.get(key)" />
-                        <li t-on-click="() => this.trigger('select-filter', key)" t-att-class="{ indented: _option.indented }">
+                        <li t-on-click="() => this._onSelectFilter(key)" t-att-class="{ indented: _option.indented }">
                             <t t-esc="_option.text"></t>
                         </li>
                     </t>
diff --git a/addons/point_of_sale/static/src/xml/Popups/ErrorTracebackPopup.xml b/addons/point_of_sale/static/src/xml/Popups/ErrorTracebackPopup.xml
index 157f1bb10d8..2ccc8b22084 100644
--- a/addons/point_of_sale/static/src/xml/Popups/ErrorTracebackPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/ErrorTracebackPopup.xml
@@ -13,7 +13,7 @@
                     <div t-if="!props.exitButtonIsShown" class="button cancel" t-on-click="confirm">
                         <t t-esc="props.confirmText" />
                     </div>
-                    <div t-if="props.exitButtonIsShown" class="button cancel" t-on-click="() => this.trigger(props.exitButtonTrigger)">
+                    <div t-if="props.exitButtonIsShown" class="button cancel" t-on-click="() => this.pos.closePos()">
                         <t t-esc="props.exitButtonText" />
                     </div>
                     <a t-att-download="tracebackFilename" t-att-href="tracebackUrl">
diff --git a/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml b/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
index c9cb4df8e8e..523ad414375 100644
--- a/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/ProductConfiguratorPopup.xml
@@ -28,7 +28,7 @@
     </t>
 
     <t t-name="RadioProductAttribute" owl="1">
-        <div class="configurator_radio">
+        <div class="configurator_radio" t-ref="root">
             <div class="table">
                 <t t-foreach="values" t-as="value" t-key="value.id">
                     <div class="attribute-name-cell">
diff --git a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
index ae6f5933dc8..0343f37b823 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
@@ -5,7 +5,7 @@
         <div class="partnerlist-screen screen">
             <div class="screen-content">
                 <div class="top-content">
-                    <div class="button highlight" t-if="state.detailIsShown" t-on-click="() => this.trigger('click-save')">
+                    <div class="button highlight" t-if="state.detailIsShown" t-on-click="() => this.env.bus.trigger('save-partner')">
                         <i t-if="env.isMobile" class="fa fa-floppy-o"/>
                         <t t-if="!env.isMobile">
                             <span> Save</span>
@@ -39,7 +39,7 @@
                         <section class="subwindow collapsed">
                             <div class="subwindow-container collapsed">
                                 <div t-if="state.detailIsShown" class="partner-details-contents subwindow-container-fix">
-                                    <PartnerDetailsEdit t-props="state.editModeProps" />
+                                    <PartnerDetailsEdit t-props="state.editModeProps" saveChanges.bind="saveChanges" />
                                 </div>
                             </div>
                         </section>
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml
index 9256bf708cb..54b7a13ce70 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PSNumpadInputButton.xml
@@ -3,7 +3,7 @@
 
     <t t-name="PSNumpadInputButton" owl="1">
         <button t-attf-class="{{ _class }}"
-                t-on-click="() => this.trigger('input-from-numpad', { key: props.value })">
+                t-on-click="() => this.numberBuffer.sendKey(props.value)">
             <t t-slot="default">
                 <t t-if="props.text">
                     <t t-esc="props.text" />
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
index f6f8cbb683c..cc39f9f1167 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
@@ -27,7 +27,7 @@
                                 <t t-foreach="payment_methods_from_config" t-as="paymentMethod"
                                    t-key="paymentMethod.id">
                                     <div class="button paymentmethod"
-                                        t-on-click="() => this.trigger('new-payment-line', paymentMethod)">
+                                        t-on-click="() => this.addNewPaymentLine(paymentMethod)">
                                         <div class="payment-method-display">
                                             <div><img class="payment-method-icon" t-att-src="paymentMethodImage(paymentMethod.id)"/></div>
                                             <span class="payment-name"><t t-esc="paymentMethod.name" /></span>
@@ -35,10 +35,17 @@
                                     </div>
                                 </t>
                             </div>
-                            <PaymentScreenPaymentLines paymentLines="paymentLines" />
+                            <PaymentScreenPaymentLines
+                                paymentLines="paymentLines"
+                                deleteLine.bind="deletePaymentLine"
+                                sendForceDone.bind="sendForceDone"
+                                sendPaymentReverse.bind="sendPaymentReverse"
+                                sendPaymentCancel.bind="sendPaymentCancel"
+                                sendPaymentRequest.bind="sendPaymentRequest"
+                                selectLine.bind="selectPaymentLine"/>
                         </div>
                         <div t-if="!env.isMobile" class="button next validation" t-att-class="{ highlight: currentOrder.is_paid() and currentOrder._isValidEmptyOrder() }"
-                            t-on-click="() => this.trigger('validate-order')">
+                            t-on-click="() => this.validateOrder()">
                             <div class="pay-circle">
                                 <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
                             </div>
@@ -105,7 +112,7 @@
                     <div class="switchpane">
                         <button class="btn-switchpane"
                             t-att-class="{ secondary: !(currentOrder.is_paid() and currentOrder._isValidEmptyOrder()) }"
-                            t-on-click="() => this.trigger('validate-order')">
+                            t-on-click="() => this.validateOrder()">
                             <h1>Validate</h1>
                         </button>
                         <button class="btn-switchpane secondary" t-on-click="() => pos.showScreen('ProductScreen', {mobile_pane: 'left'})">
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
index da2e3cff9cf..a1073763b4a 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
@@ -7,11 +7,11 @@
                 <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                     <t t-if="line.selected">
                         <div class="paymentline selected"
-                             t-att-class="selectedLineClass(line)"
-                             t-on-click="() => this.trigger('select-payment-line', { cid: line.cid })">
-                             <div class="payment-name">
+                            t-att-class="selectedLineClass(line)"
+                            t-on-click="() => this.props.selectLine(line.cid)">
+                            <div class="payment-name">
                                  <t t-esc="line.payment_method.name" />
-                             </div>
+                            </div>
                             <div class="payment-amount">
                                 <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                         <t t-esc="env.pos.format_currency_no_symbol(line.get_amount())" />
@@ -22,7 +22,7 @@
                             </div>
                             <t t-if="!line.payment_status or !['done', 'reversed', 'waitingCard', 'waitingCapture'].includes(line.payment_status)">
                                 <div class="delete-button"
-                                    t-on-click="() => this.trigger('delete-payment-line', { cid: line.cid })"
+                                    t-on-click="() => this.props.deleteLine(line.cid)"
                                     aria-label="Delete" title="Delete">
                                     <i class="fa fa-times-circle" />
                                 </div>
@@ -34,7 +34,7 @@
                                     <div class="electronic_status">
                                         Payment request pending
                                     </div>
-                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
+                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
                                         Send
                                     </div>
                                 </t>
@@ -42,7 +42,7 @@
                                     <div class="electronic_status">
                                         Transaction cancelled
                                     </div>
-                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
+                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(line)">
                                         Retry
                                     </div>
                                 </t>
@@ -50,7 +50,7 @@
                                     <div class="electronic_status">
                                         Connection error
                                     </div>
-                                    <div class="button send_force_done" title="Force Done" t-on-click="() => this.trigger('send-force-done', line)">
+                                    <div class="button send_force_done" title="Force Done" t-on-click="() => this.props.sendForceDone(line)">
                                         Force done
                                     </div>
                                 </t>
@@ -58,7 +58,7 @@
                                     <div class="electronic_status">
                                         Waiting for card
                                     </div>
-                                    <div class="button send_payment_cancel" title="Cancel Payment Request" t-on-click="() => this.trigger('send-payment-cancel', line)">
+                                    <div class="button send_payment_cancel" title="Cancel Payment Request" t-on-click="() => this.props.sendPaymentCancel(line)">
                                         Cancel
                                     </div>
                                 </t>
@@ -83,7 +83,7 @@
                                         Payment Successful
                                     </div>
                                     <t t-if="line.can_be_reversed">
-                                        <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="() => this.trigger('send-payment-reverse', line)">
+                                        <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="() => this.props.sendPaymentReverse(line)">
                                             Reverse
                                         </div>
                                     </t>
@@ -102,8 +102,8 @@
                     </t>
                     <t t-else="">
                         <div class="paymentline"
-                             t-att-class="unselectedLineClass(line)"
-                             t-on-click="() => this.trigger('select-payment-line', { cid: line.cid })">
+                            t-att-class="unselectedLineClass(line)"
+                            t-on-click="() => this.props.selectLine(line.cid)">
                              <div class="payment-name">
                                  <t t-esc="line.payment_method.name" />
                              </div>
@@ -117,7 +117,7 @@
                             </div>
                             <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)">
                                 <div class="delete-button"
-                                    t-on-click="() => this.trigger('delete-payment-line', { cid: line.cid })"
+                                    t-on-click="() => this.props.deleteLine(line.cid)"
                                     aria-label="Delete" title="Delete">
                                     <i class="fa fa-times-circle" />
                                 </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
index 9b44dfd3bd6..3ecbd598754 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
@@ -4,7 +4,7 @@
     <t t-name="ActionpadWidget" owl="1">
         <div class="actionpad">
             <button class="button set-partner" t-att-class="{'decentered': isLongName}"
-                    t-on-click="() => this.trigger('click-partner')">
+                    t-on-click="() => this.pos.selectPartner()">
                 <t t-if="!env.isMobile"><i class="fa fa-user" role="img" aria-label="Customer" title="Customer" /></t>
                 <t t-if="props.partner">
                     <t t-esc="props.partner.name" />
@@ -13,7 +13,7 @@
                     Customer
                 </t>
             </button>
-            <button class="button pay validation" t-on-click="() => this.trigger(props.actionToTrigger or 'click-pay')">
+            <button class="button pay validation" t-on-click="props.actionToTrigger ? this.props.actionToTrigger : () => this.props.clickPay()">
                 <div class="pay-circle" t-att-class="{ 'highlight': props.isActionButtonHighlighted }">
                     <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
                 </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/CategoryButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/CategoryButton.xml
index e79bc3f9fa9..f9854735ac6 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/CategoryButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/CategoryButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="CategoryButton" owl="1">
-        <span class="category-button" t-on-click="() => this.trigger('switch-category', props.category.id)">
+        <span class="category-button" t-on-click="() => this.props.switchCategory(props.category.id)">
             <div class="category-img">
                 <img t-att-src="imageUrl" alt="Category" />
             </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.xml
index 5539ce0e556..96b88a112a0 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineCustomerNoteButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="OrderlineCustomerNoteButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.onClick()">
             <i class="fa fa-sticky-note" />
             <span> </span>
             <span>Customer Note</span>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/ProductInfoButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/ProductInfoButton.xml
index 56ea5771f76..425f0b567e5 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/ProductInfoButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/ProductInfoButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="ProductInfoButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-info-circle" role="img" aria-label="Info" title="Info"/>
             Info
         </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/RefundButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/RefundButton.xml
index c9c9b5a29e6..55d9eb6d7d9 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/RefundButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/RefundButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="point_of_sale.RefundButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-undo" role="img" aria-label="Refund" title="Refund" />
             Refund
         </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.xml
index ab09f363c20..0e195dd4f65 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetFiscalPositionButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SetFiscalPositionButton" owl="1">
-        <div class="control-button o_fiscal_position_button">
+        <div class="control-button o_fiscal_position_button" t-on-click="() => this.click()">
             <i class="fa fa-book" role="img" aria-label="Set fiscal position"
                title="Set fiscal position" />
             <t t-esc='currentFiscalPositionName' />
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetPricelistButton.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetPricelistButton.xml
index ffe3e3ecae3..265855f22b1 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetPricelistButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ControlButtons/SetPricelistButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SetPricelistButton" owl="1">
-        <div class="control-button o_pricelist_button">
+        <div class="control-button o_pricelist_button" t-on-click="() => this.click()">
             <i class="fa fa-th-list" role="img" aria-label="Price list" title="Price list" />
             <t t-esc="currentPricelistName" />
         </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/OrderWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/OrderWidget.xml
index 6a4e9d5cd6a..1b4839ea304 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/OrderWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/OrderWidget.xml
@@ -14,7 +14,10 @@
                 <t t-else="">
                     <ul class="orderlines">
                         <t t-foreach="orderlinesArray" t-as="orderline" t-key="orderline.id">
-                            <Orderline line="orderline" />
+                            <Orderline
+                                editPackLotLines.bind="editPackLotLines"
+                                selectLine.bind="selectLine"
+                                line="orderline" />
                         </t>
                     </ul>
                     <OrderSummary order="order" />
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
index 75c3d041cc6..11536910ae9 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
@@ -3,7 +3,7 @@
 
     <t t-name="ProductItem" owl="1">
         <article class="product" tabindex="0" t-on-keypress="spaceClickProduct"
-                 t-on-click="() => this.trigger('click-product', props.product)"
+                 t-on-click="() => this.pos.addProductToCurrentOrder(props.product)"
                  t-att-data-product-id="props.product.id"
                  t-attf-aria-labelledby="article_product_{{props.product.id}}">
             <div class="product-img">
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
index 13327f28509..dbdd4bbf559 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductScreen.xml
@@ -19,14 +19,24 @@
                         </div>
                         <div class="subpads">
                             <t t-set="_actionName">Payment</t>
-                            <ActionpadWidget partner="partner" actionName="_actionName" onSwitchPane.bind="switchPane" />
-                            <NumpadWidget activeMode="env.pos.numpadMode" />
+                            <ActionpadWidget
+                                clickPay.bind="onClickPay"
+                                partner="partner"
+                                actionName="_actionName"
+                                onSwitchPane.bind="switchPane" />
+                            <NumpadWidget
+                                updateSelectedOrderline.bind="updateSelectedOrderline"
+                                activeMode="env.pos.numpadMode" />
                         </div>
                     </div>
                 </div>
                 <div class="rightpane" t-if="!env.isMobile || state.mobile_pane === 'right'">
-                    <ProductsWidget/>
-                    <MobileOrderWidget t-if="env.isMobile" pane="state.mobile_pane" onSwitchPane.bind="switchPane"/>
+                    <ProductsWidget />
+                    <MobileOrderWidget
+                        clickPay.bind="onClickPay"
+                        t-if="env.isMobile"
+                        pane="state.mobile_pane"
+                        onSwitchPane.bind="switchPane"/>
                 </div>
             </div>
         </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
index 069acaff2c4..9b3760fc656 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidget.xml
@@ -3,11 +3,19 @@
 
     <t t-name="ProductsWidget" owl="1">
       <div class="products-widget">
-            <ProductsWidgetControlPanel breadcrumbs="breadcrumbs" subcategories="subcategories" hasNoCategories="hasNoCategories" />
+            <ProductsWidgetControlPanel
+                updateProductList.bind="updateProductList"
+                clearSearch.bind="clearSearch"
+                updateSearch.bind="updateSearch"
+                switchCategory.bind="switchCategory"
+                breadcrumbs="breadcrumbs"
+                subcategories="subcategories"
+                hasNoCategories="hasNoCategories" />
             <div class="product-list-container">
                 <div t-if="productsToDisplay.length != 0" class="product-list">
                     <t t-foreach="productsToDisplay" t-as="product" t-key="product.id">
-                        <ProductItem product="product" />
+                        <ProductItem
+                            product="product" />
                     </t>
                 </div>
                 <div t-else="" class="product-list-empty no-results-message">
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index f85f499bc1a..97983f3b343 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -21,7 +21,7 @@
                     <!-- Breadcrumbs -->
                         <div class="breadcrumbs">
                             <span class="breadcrumb">
-                                <span class="breadcrumb-button breadcrumb-home" t-on-click="() => this.trigger('switch-category', 0)">
+                                <span class="breadcrumb-button breadcrumb-home" t-on-click="() => this.props.switchCategory(0)">
                                     <i class="fa fa-home" role="img" aria-label="Home" title="Home"></i>
                                 </span>
                             </span>
@@ -29,7 +29,7 @@
                                 <span class="breadcrumb">
                                     <i class="breadcrumb-arrow fa fa-caret-right" aria-hidden="true"/>
                                     <span class="breadcrumb-button"
-                                        t-on-click="() => this.trigger('switch-category', category.id)">
+                                        t-on-click="() => this.props.switchCategory(category.id)">
                                         <t t-esc="category.name"></t>
                                     </span>
                                 </span>
@@ -39,7 +39,7 @@
                         <div t-if="props.subcategories.length > 0 and !displayCategImages"  class="category-list simple">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
                                 <span class="category-simple-button"
-                                    t-on-click="() => this.trigger('switch-category', category.id)">
+                                    t-on-click="() => this.props.switchCategory(category.id)">
                                     <t t-esc="category.name" />
                                 </span>
                             </t>
@@ -52,7 +52,9 @@
                     <div class="category-list-scroller">
                         <div class="category-list">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
-                                <CategoryButton category="category" />
+                                <CategoryButton
+                                    switchCategory.bind="props.switchCategory"
+                                    category="category" />
                             </t>
                         </div>
                     </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/InvoiceButton.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/InvoiceButton.xml
index 9f4c1303cc2..f65643c2b9c 100644
--- a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/InvoiceButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/InvoiceButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="InvoiceButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()" t-ref="invoice-button">
             <i class="fa fa-file-pdf-o"></i>
             <span> </span>
             <span><t t-esc="commandName"></t></span>
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.xml
index df3e4e0611c..5ca8f559ef3 100644
--- a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/ControlButtons/ReprintReceiptButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="ReprintReceiptButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-print"></i>
             <span> </span>
             <span>Print Receipt</span>
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderDetails.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderDetails.xml
index 996a759070c..3dfbbaf4bf4 100644
--- a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderDetails.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderDetails.xml
@@ -25,7 +25,11 @@
                         </div>
                         <ul class="orderlines">
                             <t t-foreach="orderlines" t-as="orderline" t-key="orderline.id">
-                                <OrderlineDetails line="orderline" isSelected="orderline.id == props.selectedOrderlineId" />
+                                <OrderlineDetails
+                                    onClickOrderline.bind="this.props.onClickOrderline"
+                                    onClickRefundOrderUid.bind="props.onClickRefundOrderUid"
+                                    line="orderline"
+                                    isSelected="orderline.id == props.selectedOrderlineId" />
                             </t>
                         </ul>
                         <!-- Not using OrderSummary because we don't need it's overrides in this view. -->
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderlineDetails.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderlineDetails.xml
index dd8fd349ae9..4e8ad2be5b2 100644
--- a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderlineDetails.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/OrderlineDetails.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="OrderlineDetails" owl="1">
-        <li class="orderline" t-on-click="() => this.trigger('click-order-line', props.line)" t-att-class="{ selected: props.isSelected }">
+        <li class="orderline" t-on-click="() => this.props.onClickOrderline(props.line)" t-att-class="{ selected: props.isSelected }">
             <span class="product-name">
                 <t t-esc="productName" />
             </span>
@@ -35,7 +35,7 @@
                         <t t-set="_destinationOrderUid" t-value="getToRefundDetail().destinationOrderUid"/>
                         <t t-if="_destinationOrderUid">
                             <t t-esc="getRefundingMessage()" />
-                            <span t-esc="_destinationOrderUid" class="order-link" t-on-click.stop="() => this.trigger('click-refund-order-uid', _destinationOrderUid)" />
+                            <span t-esc="_destinationOrderUid" class="order-link" t-on-click.stop="() => this.props.onClickRefundOrderUid(_destinationOrderUid)" />
                         </t>
                         <t t-else="">
                             <t t-esc="getToRefundMessage()" />
diff --git a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml
index 9b5df1168d5..f5afca7aff5 100644
--- a/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/TicketScreen/TicketScreen.xml
@@ -8,7 +8,7 @@
                     <div class="controls">
                         <t t-if="!env.isMobile || !state.showSearchBar">
                             <div class="buttons">
-                                <button class="discard" t-on-click="() => this.pos.closeScreen()">
+                                <button class="discard" t-on-click="() => this.onCloseScreen()">
                                     <span class="search-icon">
                                         <i class="fa fa-angle-double-left"/>
                                     </span>
@@ -16,7 +16,7 @@
                                         Back
                                     </t>
                                 </button>
-                                <button t-if="allowNewOrders" class="highlight" t-on-click="() => this.trigger('create-new-order')">New Order</button>
+                                <button t-if="allowNewOrders" class="highlight" t-on-click="() => this.onCreateNewOrder()">New Order</button>
                             </div>
                         </t>
                         <t t-if="env.isMobile">
@@ -36,13 +36,18 @@
                             </t>
                         </t>
                         <t t-set="_placeholder">Search Orders...</t>
-                        <SearchBar t-if="state.showSearchBar" config="getSearchBarConfig()" placeholder="_placeholder" />
+                        <SearchBar
+                            t-if="state.showSearchBar"
+                            config="getSearchBarConfig()"
+                            placeholder="_placeholder"
+                            onSearch.bind="onSearch"
+                            onFilterSelected.bind="onFilterSelected" />
                         <div t-if="shouldShowPageControls()" class="item">
                             <div class="page-controls">
-                                <div class="previous" t-on-click="() => this.trigger('prev-page')">
+                                <div class="previous" t-on-click="() => this.onPrevPage()">
                                     <i class="fa fa-fw fa-caret-left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
                                 </div>
-                                <div class="next" t-on-click="() => this.trigger('next-page')">
+                                <div class="next" t-on-click="() => this.onNextPage()">
                                     <i class="fa fa-fw fa-caret-right" role="img" aria-label="Next Order List" title="Next Order List"></i>
                                 </div>
                             </div>
@@ -65,7 +70,7 @@
                                 <div class="col very-narrow" name="delete"></div>
                             </div>
                             <t t-foreach="_filteredOrderList" t-as="order" t-key="order.cid">
-                                <div class="order-row" t-att-class="{ highlight: isHighlighted(order) }" t-on-click="() => this.trigger('click-order', order)">
+                                <div class="order-row" t-att-class="{ highlight: isHighlighted(order) }" t-on-click="() => this.onClickOrder(order)">
                                     <div class="col wide">
                                         <div t-if="env.isMobile">Date</div>
                                         <div><t t-esc="getDate(order)"></t></div>
@@ -94,7 +99,7 @@
                                         <div t-if="env.isMobile">Status</div>
                                         <div><t t-esc="getStatus(order)"></t></div>
                                     </div>
-                                    <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button" name="delete" t-on-click.stop="() => this.trigger('delete-order', order)">
+                                    <div t-if="!shouldHideDeleteButton(order)" class="col very-narrow delete-button" name="delete" t-on-click.stop="() => this.onDeleteOrder(order)">
                                         <i class="fa fa-trash" aria-hidden="true"/><t t-if="env.isMobile"> Delete</t>
                                     </div>
                                     <div t-else="" class="col very-narrow"></div>
@@ -112,17 +117,32 @@
                 <div class="leftpane">
                     <t t-set="_selectedSyncedOrder" t-value="getSelectedSyncedOrder()" />
                     <t t-set="_selectedOrderlineId" t-value="getSelectedOrderlineId()" />
-                    <OrderDetails order="_selectedSyncedOrder" selectedOrderlineId="_selectedOrderlineId" highlightHeaderNote="_state.ui.highlightHeaderNote" />
+                    <OrderDetails
+                        onClickOrderline.bind="onClickOrderline"
+                        onClickRefundOrderUid.bind="onClickRefundOrderUid"
+                        order="_selectedSyncedOrder"
+                        selectedOrderlineId="_selectedOrderlineId"
+                        highlightHeaderNote="_state.ui.highlightHeaderNote" />
                     <div class="pads">
                         <div class="control-buttons">
-                            <InvoiceButton order="_selectedSyncedOrder" />
+                            <InvoiceButton
+                                onInvoiceOrder.bind="onInvoiceOrder"
+                                order="_selectedSyncedOrder" />
                             <ReprintReceiptButton order="_selectedSyncedOrder" />
                         </div>
                         <div class="subpads">
                             <!-- We set so that the term 'Refund' is translated. -->
                             <t t-set="_actionName">Refund</t>
-                            <ActionpadWidget partner="getSelectedPartner()" actionName="_actionName" actionToTrigger="'do-refund'" isActionButtonHighlighted="getHasItemsToRefund()" />
-                            <NumpadWidget disabledModes="['price', 'discount']" activeMode="_selectedOrderlineId and 'quantity'" disableSign="true" />
+                            <ActionpadWidget
+                                partner="getSelectedPartner()"
+                                actionName="_actionName"
+                                actionToTrigger.bind="onDoRefund"
+                                isActionButtonHighlighted="getHasItemsToRefund()" />
+                            <NumpadWidget
+                                disabledModes="['price', 'discount']"
+                                setNumpadMode="() => {}"
+                                activeMode="_selectedOrderlineId and 'quantity'"
+                                disableSign="true" />
                         </div>
                     </div>
                 </div>
diff --git a/addons/point_of_sale/static/tests/unit/number_buffer_service_tests.js b/addons/point_of_sale/static/tests/unit/number_buffer_service_tests.js
index ffa8c5f32f7..82340787c4a 100644
--- a/addons/point_of_sale/static/tests/unit/number_buffer_service_tests.js
+++ b/addons/point_of_sale/static/tests/unit/number_buffer_service_tests.js
@@ -2,14 +2,13 @@
 
 import testUtils from "web.test_utils";
 import { mount } from "@web/../tests/helpers/utils";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useService } from "@web/core/utils/hooks";
 import { numberBuffer } from "@point_of_sale/app/number_buffer_service";
 import { registry } from "@web/core/registry";
 
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 
-import { useState, xml } from "@odoo/owl";
+import { Component, useState, xml } from "@odoo/owl";
 
 QUnit.module("unit tests for NumberBuffer", {
     async beforeEach() {
@@ -23,13 +22,12 @@ QUnit.test("simple fast inputs with capture in between", async function (assert)
     const target = testUtils.prepareTarget();
     const env = await makeTestEnv();
 
-    class Root extends LegacyComponent {
+    class Root extends Component {
         setup() {
             this.state = useState({ buffer: "" });
             this.numberBuffer = useService("number_buffer");
             this.numberBuffer.activate();
             this.numberBuffer.use({
-                nonKeyboardInputEvent: "numpad-click-input",
                 state: this.state,
             });
         }
@@ -38,10 +36,10 @@ QUnit.test("simple fast inputs with capture in between", async function (assert)
             this.numberBuffer.reset();
         }
         onClickOne() {
-            this.trigger("numpad-click-input", { key: "1" });
+            this.numberBuffer.sendKey("1");
         }
         onClickTwo() {
-            this.trigger("numpad-click-input", { key: "2" });
+            this.numberBuffer.sendKey("2");
         }
     }
     Root.template = xml/* html */ `
diff --git a/addons/point_of_sale/static/tests/unit/popup_controller_tests.js b/addons/point_of_sale/static/tests/unit/popup_controller_tests.js
index f0bf876cf13..d1714a51be6 100644
--- a/addons/point_of_sale/static/tests/unit/popup_controller_tests.js
+++ b/addons/point_of_sale/static/tests/unit/popup_controller_tests.js
@@ -1,7 +1,6 @@
 /** @odoo-module */
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import makeTestEnvironment from "web.test_env";
 import { click, getFixture, mount, nextTick, triggerEvent } from "@web/../tests/helpers/utils";
 import { clearRegistryWithCleanup, makeTestEnv } from "@web/../tests/helpers/mock_env";
@@ -9,8 +8,7 @@ import { registry } from "@web/core/registry";
 import { popupService } from "@point_of_sale/app/popup/popup_service";
 import { MainComponentsContainer } from "@web/core/main_components_container";
 import { useService } from "@web/core/utils/hooks";
-
-const { xml } = owl;
+import { Component, xml } from "@odoo/owl";
 
 // Note that we are creating new popups here to decouple this test from the pos app.
 class CustomPopup1 extends AbstractAwaitablePopup {}
@@ -38,7 +36,7 @@ CustomPopup2.template = xml/* html */ `
     </div>
 `;
 
-class Root extends LegacyComponent {
+class Root extends Component {
     static components = { MainComponentsContainer };
     setup() {
         super.setup();
diff --git a/addons/pos_adyen/static/src/js/PaymentScreen.js b/addons/pos_adyen/static/src/js/PaymentScreen.js
index 77bdd0ddb93..5dd7ecb281d 100644
--- a/addons/pos_adyen/static/src/js/PaymentScreen.js
+++ b/addons/pos_adyen/static/src/js/PaymentScreen.js
@@ -2,7 +2,7 @@
 
 import { PaymentScreen } from "@point_of_sale/js/Screens/PaymentScreen/PaymentScreen";
 import { patch } from "@web/core/utils/patch";
-const { onMounted } = owl;
+import { onMounted } from "@odoo/owl";
 
 patch(PaymentScreen.prototype, "pos_adyen.PaymentScreen", {
     setup() {
diff --git a/addons/pos_discount/static/src/js/DiscountButton.js b/addons/pos_discount/static/src/js/DiscountButton.js
index 176a8606907..b452dc2ac2f 100644
--- a/addons/pos_discount/static/src/js/DiscountButton.js
+++ b/addons/pos_discount/static/src/js/DiscountButton.js
@@ -1,20 +1,19 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { NumberPopup } from "@point_of_sale/js/Popups/NumberPopup";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
+import { Component } from "@odoo/owl";
 
-export class DiscountButton extends LegacyComponent {
+export class DiscountButton extends Component {
     static template = "DiscountButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
-    async onClick() {
+    async click() {
         var self = this;
         const { confirmed, payload } = await this.popup.add(NumberPopup, {
             title: this.env._t("Discount Percentage"),
diff --git a/addons/pos_discount/static/src/xml/DiscountButton.xml b/addons/pos_discount/static/src/xml/DiscountButton.xml
index c8cd5bc5e59..630c8b4b28c 100644
--- a/addons/pos_discount/static/src/xml/DiscountButton.xml
+++ b/addons/pos_discount/static/src/xml/DiscountButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="DiscountButton" owl="1">
-        <span class="control-button js_discount">
+        <span class="control-button js_discount" t-on-click="() => this.click()">
             <i class="fa fa-tag"></i>
             <span> </span>
             <span>Discount</span>
diff --git a/addons/pos_hr/static/src/js/HeaderLockButton.js b/addons/pos_hr/static/src/js/HeaderLockButton.js
index d18715d7c5c..ef80cf4e218 100644
--- a/addons/pos_hr/static/src/js/HeaderLockButton.js
+++ b/addons/pos_hr/static/src/js/HeaderLockButton.js
@@ -1,11 +1,9 @@
 /** @odoo-module */
 
+import { Component, useState } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 
-const { useState } = owl;
-
-export class HeaderLockButton extends LegacyComponent {
+export class HeaderLockButton extends Component {
     static template = "HeaderLockButton";
 
     setup() {
diff --git a/addons/pos_hr/static/src/js/LoginScreen.js b/addons/pos_hr/static/src/js/LoginScreen.js
index d56ee7ba01c..421702d6720 100644
--- a/addons/pos_hr/static/src/js/LoginScreen.js
+++ b/addons/pos_hr/static/src/js/LoginScreen.js
@@ -1,11 +1,11 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { useCashierSelector } from "@pos_hr/js/SelectCashierMixin";
 import { registry } from "@web/core/registry";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
-export class LoginScreen extends LegacyComponent {
+export class LoginScreen extends Component {
     static template = "LoginScreen";
     setup() {
         super.setup(...arguments);
diff --git a/addons/pos_loyalty/__manifest__.py b/addons/pos_loyalty/__manifest__.py
index c0f6ddc6038..aba1ffd196d 100644
--- a/addons/pos_loyalty/__manifest__.py
+++ b/addons/pos_loyalty/__manifest__.py
@@ -26,6 +26,7 @@
     'assets': {
         'point_of_sale.assets': [
             'pos_loyalty/static/src/css/Loyalty.scss',
+            'pos_loyalty/static/src/app/**/*',
             'pos_loyalty/static/src/js/**/*',
             'pos_loyalty/static/src/xml/**/*',
         ],
diff --git a/addons/pos_loyalty/static/src/app/pos_store.js b/addons/pos_loyalty/static/src/app/pos_store.js
new file mode 100644
index 00000000000..1b4429cd1b9
--- /dev/null
+++ b/addons/pos_loyalty/static/src/app/pos_store.js
@@ -0,0 +1,195 @@
+/** @odoo-module */
+
+import { patch } from "@web/core/utils/patch";
+import { PosStore } from "@point_of_sale/app/pos_store";
+import { _t } from "@web/core/l10n/translation";
+import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
+import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
+import { TextInputPopup } from "@point_of_sale/js/Popups/TextInputPopup";
+
+patch(PosStore.prototype, "pos_loyalty.PosStore", {
+    async addProductFromUi(product, options) {
+        const _super = this._super;
+        const order = this.globalState.get_order();
+        const linkedProgramIds = this.globalState.productId2ProgramIds[product.id] || [];
+        const linkedPrograms = linkedProgramIds.map((id) => this.globalState.program_by_id[id]);
+        let selectedProgram = null;
+        if (linkedPrograms.length > 1) {
+            const { confirmed, payload: program } = await this.popup.add(SelectionPopup, {
+                title: _t("Select program"),
+                list: linkedPrograms.map((program) => ({
+                    id: program.id,
+                    item: program,
+                    label: program.name,
+                })),
+            });
+            if (confirmed) {
+                selectedProgram = program;
+            } else {
+                // Do nothing here if the selection is cancelled.
+                return;
+            }
+        } else if (linkedPrograms.length === 1) {
+            selectedProgram = linkedPrograms[0];
+        }
+        if (selectedProgram && selectedProgram.program_type == "gift_card") {
+            const shouldProceed = await this._setupGiftCardOptions(selectedProgram, options);
+            if (!shouldProceed) {
+                return;
+            }
+        } else if (selectedProgram && selectedProgram.program_type == "ewallet") {
+            const shouldProceed = await this.setupEWalletOptions(selectedProgram, options);
+            if (!shouldProceed) {
+                return;
+            }
+        }
+        const potentialRewards = this.getPotentialFreeProductRewards();
+        const rewardsToApply = [];
+        for (const reward of potentialRewards) {
+            for (const reward_product_id of reward.reward.reward_product_ids) {
+                if (reward_product_id == product.id) {
+                    rewardsToApply.push(reward);
+                }
+            }
+        }
+
+        await _super(product, options);
+        await order._updatePrograms();
+        if (rewardsToApply.length == 1) {
+            const reward = rewardsToApply[0];
+            order._applyReward(reward.reward, reward.coupon_id, { product: product.id });
+        }
+
+        order._updateRewards();
+        return options;
+    },
+    /**
+     * Sets up the options for the gift card product.
+     * @param {object} program
+     * @param {object} options
+     * @returns {Promise<boolean>} whether to proceed with adding the product or not
+     */
+    async _setupGiftCardOptions(program, options) {
+        options.quantity = 1;
+        options.merge = false;
+        options.eWalletGiftCardProgram = program;
+
+        // If gift card program setting is 'scan_use', ask for the code.
+        if (this.globalState.config.gift_card_settings == "scan_use") {
+            const { confirmed, payload: code } = await this.globalState.env.services.popup.add(
+                TextInputPopup,
+                {
+                    title: _t("Generate a Gift Card"),
+                    startingValue: "",
+                    placeholder: _t("Enter the gift card code"),
+                }
+            );
+            if (!confirmed) {
+                return false;
+            }
+            const trimmedCode = code.trim();
+            if (trimmedCode && trimmedCode.startsWith("044")) {
+                // check if the code exist in the database
+                // if so, use its balance, otherwise, use the unit price of the gift card product
+                const fetchedGiftCard = await this.globalState.env.services.rpc({
+                    model: "loyalty.card",
+                    method: "search_read",
+                    args: [
+                        [
+                            ["code", "=", trimmedCode],
+                            ["program_id", "=", program.id],
+                        ],
+                        ["points", "source_pos_order_id"],
+                    ],
+                });
+                // There should be maximum one gift card for a given code.
+                const giftCard = fetchedGiftCard[0];
+                if (giftCard && giftCard.source_pos_order_id) {
+                    this.popup.add(ErrorPopup, {
+                        title: _t("This gift card has already been sold"),
+                        body: _t("You cannot sell a gift card that has already been sold."),
+                    });
+                    return false;
+                }
+                options.giftBarcode = trimmedCode;
+                if (giftCard) {
+                    // Use the balance of the gift card as the price of the orderline.
+                    // NOTE: No need to convert the points to price because when opening a session,
+                    // the gift card programs are made sure to have 1 point = 1 currency unit.
+                    options.price = giftCard.points;
+                    options.giftCardId = giftCard.id;
+                }
+            } else {
+                this.globalState.env.services.pos_notification.add(
+                    "Please enter a valid gift card code."
+                );
+                return false;
+            }
+        }
+        return true;
+    },
+    async setupEWalletOptions(program, options) {
+        options.quantity = 1;
+        options.merge = false;
+        options.eWalletGiftCardProgram = program;
+        return true;
+    },
+    /**
+     * Returns the reward such that when its reward product is added
+     * in the order, it will be added as free. That is, when added,
+     * it comes with the corresponding reward product line.
+     */
+    getPotentialFreeProductRewards() {
+        const order = this.globalState.get_order();
+        const allCouponPrograms = Object.values(order.couponPointChanges)
+            .map((pe) => {
+                return {
+                    program_id: pe.program_id,
+                    coupon_id: pe.coupon_id,
+                };
+            })
+            .concat(
+                order.codeActivatedCoupons.map((coupon) => {
+                    return {
+                        program_id: coupon.program_id,
+                        coupon_id: coupon.id,
+                    };
+                })
+            );
+        const result = [];
+        for (const couponProgram of allCouponPrograms) {
+            const program = this.globalState.program_by_id[couponProgram.program_id];
+            const points = order._getRealCouponPoints(couponProgram.coupon_id);
+            const hasLine = order.orderlines.filter((line) => !line.is_reward_line).length > 0;
+            for (const reward of program.rewards.filter(
+                (reward) => reward.reward_type == "product"
+            )) {
+                if (points < reward.required_points) {
+                    continue;
+                }
+                // Loyalty program (applies_on == 'both') should needs an orderline before it can apply a reward.
+                const considerTheReward =
+                    program.applies_on !== "both" || (program.applies_on == "both" && hasLine);
+                if (reward.reward_type === "product" && considerTheReward) {
+                    const product = this.globalState.db.get_product_by_id(
+                        reward.reward_product_ids[0]
+                    );
+                    const potentialQty = order._computePotentialFreeProductQty(
+                        reward,
+                        product,
+                        points
+                    );
+                    if (potentialQty <= 0) {
+                        continue;
+                    }
+                    result.push({
+                        coupon_id: couponProgram.coupon_id,
+                        reward: reward,
+                        potentialQty,
+                    });
+                }
+            }
+        }
+        return result;
+    },
+});
diff --git a/addons/pos_loyalty/static/src/js/ControlButtons/PromoCodeButton.js b/addons/pos_loyalty/static/src/js/ControlButtons/PromoCodeButton.js
index 5faf6b56b2f..19d5e3a2a1a 100644
--- a/addons/pos_loyalty/static/src/js/ControlButtons/PromoCodeButton.js
+++ b/addons/pos_loyalty/static/src/js/ControlButtons/PromoCodeButton.js
@@ -1,20 +1,19 @@
 /** @odoo-module **/
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { TextInputPopup } from "@point_of_sale/js/Popups/TextInputPopup";
+import { Component } from "@odoo/owl";
 
-export class PromoCodeButton extends LegacyComponent {
+export class PromoCodeButton extends Component {
     static template = "PromoCodeButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
 
-    async onClick() {
+    async click() {
         let { confirmed, payload: code } = await this.popup.add(TextInputPopup, {
             title: this.env._t("Enter Code"),
             startingValue: "",
diff --git a/addons/pos_loyalty/static/src/js/ControlButtons/ResetProgramsButton.js b/addons/pos_loyalty/static/src/js/ControlButtons/ResetProgramsButton.js
index 836861f81be..38efd9899d3 100644
--- a/addons/pos_loyalty/static/src/js/ControlButtons/ResetProgramsButton.js
+++ b/addons/pos_loyalty/static/src/js/ControlButtons/ResetProgramsButton.js
@@ -1,20 +1,18 @@
 /** @odoo-module **/
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
-export class ResetProgramsButton extends LegacyComponent {
+export class ResetProgramsButton extends Component {
     static template = "ResetProgramsButton";
 
     setup() {
         super.setup();
-        useListener("click", this.onClick);
     }
     _isDisabled() {
         return !this.env.pos.get_order().isProgramsResettable();
     }
-    onClick() {
+    click() {
         this.env.pos.get_order()._resetPrograms();
     }
 }
diff --git a/addons/pos_loyalty/static/src/js/ControlButtons/RewardButton.js b/addons/pos_loyalty/static/src/js/ControlButtons/RewardButton.js
index 05f9071eb26..006d1ff6721 100644
--- a/addons/pos_loyalty/static/src/js/ControlButtons/RewardButton.js
+++ b/addons/pos_loyalty/static/src/js/ControlButtons/RewardButton.js
@@ -1,18 +1,19 @@
 /** @odoo-module **/
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
+import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
-export class RewardButton extends LegacyComponent {
+export class RewardButton extends Component {
     static template = "RewardButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
+        this.pos = usePos();
         this.notification = useService("pos_notification");
-        useListener("click", this.onClick);
     }
 
     /**
@@ -42,7 +43,7 @@ export class RewardButton extends LegacyComponent {
         }
         const discountRewards = rewards.filter(({ reward }) => reward.reward_type == "discount");
         const freeProductRewards = rewards.filter(({ reward }) => reward.reward_type == "product");
-        const potentialFreeProductRewards = order.getPotentialFreeProductRewards();
+        const potentialFreeProductRewards = this.pos.getPotentialFreeProductRewards();
         return discountRewards.concat(
             this._mergeFreeProductRewards(freeProductRewards, potentialFreeProductRewards)
         );
@@ -84,11 +85,7 @@ export class RewardButton extends LegacyComponent {
             (reward.reward_type == "product" && reward.program_id.applies_on !== "both") ||
             (reward.program_id.applies_on == "both" && potentialQty)
         ) {
-            // Delegate the addition of product and reward update to the `click-product` event.
-            this.trigger(
-                "click-product",
-                this.env.pos.db.get_product_by_id(args["product"] || reward.reward_product_ids[0])
-            );
+            this.pos.addProductToCurrentOrder(args["product"] || reward.reward_product_ids[0]);
             return true;
         } else {
             const result = order._applyReward(reward, coupon_id, args);
@@ -101,7 +98,7 @@ export class RewardButton extends LegacyComponent {
         }
     }
 
-    async onClick() {
+    async click() {
         const rewards = this._getPotentialRewards();
         if (rewards.length === 1) {
             return this._applyReward(
diff --git a/addons/pos_loyalty/static/src/js/ControlButtons/eWalletButton.js b/addons/pos_loyalty/static/src/js/ControlButtons/eWalletButton.js
index b8e21744f1f..9925ae7549f 100644
--- a/addons/pos_loyalty/static/src/js/ControlButtons/eWalletButton.js
+++ b/addons/pos_loyalty/static/src/js/ControlButtons/eWalletButton.js
@@ -1,17 +1,19 @@
 /** @odoo-module **/
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
 import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { useService } from "@web/core/utils/hooks";
+import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component } from "@odoo/owl";
 
-export class eWalletButton extends LegacyComponent {
+export class eWalletButton extends Component {
     static template = "point_of_sale.eWalletButton";
 
     setup() {
         super.setup(...arguments);
         this.popup = useService("popup");
+        this.pos = usePos();
     }
 
     _getEWalletRewards(order) {
@@ -50,7 +52,7 @@ export class eWalletButton extends LegacyComponent {
                 const eWalletProduct = this.env.pos.db.get_product_by_id(
                     selectedProgram.trigger_product_ids[0]
                 );
-                order.add_product(eWalletProduct, {
+                this.pos.addProductFromUi(eWalletProduct, {
                     price: -orderTotal,
                     merge: false,
                     eWalletGiftCardProgram: selectedProgram,
diff --git a/addons/pos_loyalty/static/src/js/Loyalty.js b/addons/pos_loyalty/static/src/js/Loyalty.js
index 2a714d411e8..e8311e902e3 100644
--- a/addons/pos_loyalty/static/src/js/Loyalty.js
+++ b/addons/pos_loyalty/static/src/js/Loyalty.js
@@ -431,10 +431,6 @@ patch(Order.prototype, "pos_loyalty.Order", {
         line.giftCardId = options.giftCardId;
         line.eWalletGiftCardProgram = options.eWalletGiftCardProgram;
     },
-    add_product(product, options) {
-        this._super(...arguments);
-        this._updateRewards();
-    },
     async _initializePrograms() {
         // When deleting a reward line, a popup will be displayed if the reward was automatic,
         //  if confirmed the reward is added to this list and will not be claimed automatically again.
@@ -1068,61 +1064,6 @@ patch(Order.prototype, "pos_loyalty.Order", {
         }
         return result;
     },
-    /**
-     * Returns the reward such that when its reward product is added
-     * in the order, it will be added as free. That is, when added,
-     * it comes with the corresponding reward product line.
-     */
-    getPotentialFreeProductRewards() {
-        const allCouponPrograms = Object.values(this.couponPointChanges)
-            .map((pe) => {
-                return {
-                    program_id: pe.program_id,
-                    coupon_id: pe.coupon_id,
-                };
-            })
-            .concat(
-                this.codeActivatedCoupons.map((coupon) => {
-                    return {
-                        program_id: coupon.program_id,
-                        coupon_id: coupon.id,
-                    };
-                })
-            );
-        const result = [];
-        for (const couponProgram of allCouponPrograms) {
-            const program = this.pos.program_by_id[couponProgram.program_id];
-            const points = this._getRealCouponPoints(couponProgram.coupon_id);
-            const hasLine = this.orderlines.filter((line) => !line.is_reward_line).length > 0;
-            for (const reward of program.rewards.filter(
-                (reward) => reward.reward_type == "product"
-            )) {
-                if (points < reward.required_points) {
-                    continue;
-                }
-                // Loyalty program (applies_on == 'both') should needs an orderline before it can apply a reward.
-                const considerTheReward =
-                    program.applies_on !== "both" || (program.applies_on == "both" && hasLine);
-                if (reward.reward_type === "product" && considerTheReward) {
-                    const product = this.pos.db.get_product_by_id(reward.reward_product_ids[0]);
-                    const potentialQty = this._computePotentialFreeProductQty(
-                        reward,
-                        product,
-                        points
-                    );
-                    if (potentialQty <= 0) {
-                        continue;
-                    }
-                    result.push({
-                        coupon_id: couponProgram.coupon_id,
-                        reward: reward,
-                        potentialQty,
-                    });
-                }
-            }
-        }
-        return result;
-    },
     /**
      * Applies a reward to the order, `_updateRewards` is expected to be called right after.
      *
diff --git a/addons/pos_loyalty/static/src/js/OrderWidget.js b/addons/pos_loyalty/static/src/js/OrderWidget.js
index aacc6979c16..bb5ef91ed2d 100644
--- a/addons/pos_loyalty/static/src/js/OrderWidget.js
+++ b/addons/pos_loyalty/static/src/js/OrderWidget.js
@@ -12,8 +12,7 @@ patch(OrderWidget.prototype, "pos_loyalty.OrderWidget", {
         const seenRewards = new Set();
         const activeRewards = [];
         for (const line of order._get_reward_lines()) {
-            const key =
-                line.reward_id + "-" + line.coupon_id + "-" + line.reward_identifier_code;
+            const key = line.reward_id + "-" + line.coupon_id + "-" + line.reward_identifier_code;
             if (seenRewards.has(key)) {
                 continue;
             }
diff --git a/addons/pos_loyalty/static/src/js/ProductScreen.js b/addons/pos_loyalty/static/src/js/ProductScreen.js
index 31028b86b8e..a5addd1911a 100644
--- a/addons/pos_loyalty/static/src/js/ProductScreen.js
+++ b/addons/pos_loyalty/static/src/js/ProductScreen.js
@@ -4,9 +4,6 @@ import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductSc
 import { useBarcodeReader } from "@point_of_sale/js/custom_hooks";
 import { patch } from "@web/core/utils/patch";
 import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
-import { TextInputPopup } from "@point_of_sale/js/Popups/TextInputPopup";
-import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
-import { SelectionPopup } from "@point_of_sale/js/Popups/SelectionPopup";
 import { useService } from "@web/core/utils/hooks";
 
 patch(ProductScreen.prototype, "pos_loyalty.ProductScreen", {
@@ -17,7 +14,7 @@ patch(ProductScreen.prototype, "pos_loyalty.ProductScreen", {
             coupon: this._onCouponScan,
         });
     },
-    async _onClickPay() {
+    async onClickPay() {
         const order = this.env.pos.get_order();
         const eWalletLine = order
             .get_orderlines()
@@ -41,137 +38,14 @@ patch(ProductScreen.prototype, "pos_loyalty.ProductScreen", {
             return this._super(...arguments);
         }
     },
-    /**
-     * Sets up the options for the gift card product.
-     * @param {object} program
-     * @param {object} options
-     * @returns {Promise<boolean>} whether to proceed with adding the product or not
-     */
-    async _setupGiftCardOptions(program, options) {
-        options.quantity = 1;
-        options.merge = false;
-        options.eWalletGiftCardProgram = program;
-
-        // If gift card program setting is 'scan_use', ask for the code.
-        if (this.env.pos.config.gift_card_settings == "scan_use") {
-            const { confirmed, payload: code } = await this.popup.add(TextInputPopup, {
-                title: this.env._t("Generate a Gift Card"),
-                startingValue: "",
-                placeholder: this.env._t("Enter the gift card code"),
-            });
-            if (!confirmed) {
-                return false;
-            }
-            const trimmedCode = code.trim();
-            if (trimmedCode && trimmedCode.startsWith("044")) {
-                // check if the code exist in the database
-                // if so, use its balance, otherwise, use the unit price of the gift card product
-                const fetchedGiftCard = await this.rpc({
-                    model: "loyalty.card",
-                    method: "search_read",
-                    args: [
-                        [
-                            ["code", "=", trimmedCode],
-                            ["program_id", "=", program.id],
-                        ],
-                        ["points", "source_pos_order_id"],
-                    ],
-                });
-                // There should be maximum one gift card for a given code.
-                const giftCard = fetchedGiftCard[0];
-                if (giftCard && giftCard.source_pos_order_id) {
-                    this.popup.add(ErrorPopup, {
-                        title: this.env._t("This gift card has already been sold"),
-                        body: this.env._t(
-                            "You cannot sell a gift card that has already been sold."
-                        ),
-                    });
-                    return false;
-                }
-                options.giftBarcode = trimmedCode;
-                if (giftCard) {
-                    // Use the balance of the gift card as the price of the orderline.
-                    // NOTE: No need to convert the points to price because when opening a session,
-                    // the gift card programs are made sure to have 1 point = 1 currency unit.
-                    options.price = giftCard.points;
-                    options.giftCardId = giftCard.id;
-                }
-            } else {
-                this.notification.add("Please enter a valid gift card code.");
-                return false;
-            }
-        }
-        return true;
-    },
-    async setupEWalletOptions(program, options) {
-        options.quantity = 1;
-        options.merge = false;
-        options.eWalletGiftCardProgram = program;
-        return true;
-    },
-    /**
-     * If the product is a potential reward, also apply the reward.
-     * @override
-     */
-    async _addProduct(product, options) {
-        const _super = this._super;
-        const linkedProgramIds = this.env.pos.productId2ProgramIds[product.id] || [];
-        const linkedPrograms = linkedProgramIds.map((id) => this.env.pos.program_by_id[id]);
-        let selectedProgram = null;
-        if (linkedPrograms.length > 1) {
-            const { confirmed, payload: program } = await this.popup.add(SelectionPopup, {
-                title: this.env._t("Select program"),
-                list: linkedPrograms.map((program) => ({
-                    id: program.id,
-                    item: program,
-                    label: program.name,
-                })),
-            });
-            if (confirmed) {
-                selectedProgram = program;
-            } else {
-                // Do nothing here if the selection is cancelled.
-                return;
-            }
-        } else if (linkedPrograms.length === 1) {
-            selectedProgram = linkedPrograms[0];
-        }
-        if (selectedProgram && selectedProgram.program_type == "gift_card") {
-            const shouldProceed = await this._setupGiftCardOptions(selectedProgram, options);
-            if (!shouldProceed) {
-                return;
-            }
-        } else if (selectedProgram && selectedProgram.program_type == "ewallet") {
-            const shouldProceed = await this.setupEWalletOptions(selectedProgram, options);
-            if (!shouldProceed) {
-                return;
-            }
-        }
-        const order = this.env.pos.get_order();
-        const potentialRewards = order.getPotentialFreeProductRewards();
-        const rewardsToApply = [];
-        for (const reward of potentialRewards) {
-            for (const reward_product_id of reward.reward.reward_product_ids) {
-                if (reward_product_id == product.id) {
-                    rewardsToApply.push(reward);
-                }
-            }
-        }
-        await _super(product, options);
-        await order._updatePrograms();
-        if (rewardsToApply.length == 1) {
-            const reward = rewardsToApply[0];
-            order._applyReward(reward.reward, reward.coupon_id, { product: product.id });
-        }
-    },
     _onCouponScan(code) {
         // IMPROVEMENT: Ability to understand if the scanned code is to be paid or to be redeemed.
         this.currentOrder.activateCode(code.base_code);
     },
-    async _updateSelectedOrderline(event) {
+    async updateSelectedOrderline({ buffer, key }) {
         const _super = this._super;
         const selectedLine = this.currentOrder.get_selected_orderline();
-        if (event.detail.key === "-") {
+        if (key === "-") {
             if (selectedLine.eWalletGiftCardProgram) {
                 // Do not allow negative quantity or price in a gift card or ewallet orderline.
                 // Refunding gift card or ewallet is not supported.
@@ -188,7 +62,7 @@ patch(ProductScreen.prototype, "pos_loyalty.ProductScreen", {
             selectedLine &&
             selectedLine.is_reward_line &&
             !selectedLine.manual_reward &&
-            (event.detail.key === "Backspace" || event.detail.key === "Delete")
+            (key === "Backspace" || key === "Delete")
         ) {
             const reward = this.env.pos.reward_by_id[selectedLine.reward_id];
             const { confirmed } = await this.popup.add(ConfirmPopup, {
@@ -203,13 +77,13 @@ patch(ProductScreen.prototype, "pos_loyalty.ProductScreen", {
                 confirmText: this.env._t("Yes"),
             });
             if (confirmed) {
-                event.detail.buffer = null;
+                buffer = null;
             } else {
                 // Cancel backspace
                 return;
             }
         }
-        return _super(...arguments);
+        return _super({ buffer, key });
     },
     /**
      * 1/ Perform the usual set value operation (this._super(val)) if the line being modified
diff --git a/addons/pos_loyalty/static/src/xml/ControlButtons/PromoCodeButton.xml b/addons/pos_loyalty/static/src/xml/ControlButtons/PromoCodeButton.xml
index 46c4220e1c5..5823b5e5012 100644
--- a/addons/pos_loyalty/static/src/xml/ControlButtons/PromoCodeButton.xml
+++ b/addons/pos_loyalty/static/src/xml/ControlButtons/PromoCodeButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="PromoCodeButton" owl="1">
-        <span class="control-button">
+        <span class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-barcode"></i>
             <span> </span>
             <span>Enter Code</span>
diff --git a/addons/pos_loyalty/static/src/xml/ControlButtons/ResetProgramsButton.xml b/addons/pos_loyalty/static/src/xml/ControlButtons/ResetProgramsButton.xml
index 453d864fce5..3f0066b2e04 100644
--- a/addons/pos_loyalty/static/src/xml/ControlButtons/ResetProgramsButton.xml
+++ b/addons/pos_loyalty/static/src/xml/ControlButtons/ResetProgramsButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="ResetProgramsButton" owl="1">
-        <span class="control-button" t-att-class="{'disabled': _isDisabled()}">
+        <span class="control-button" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
             <i class="fa fa-star"></i>
             <span> </span>
             <span>Reset Programs</span>
diff --git a/addons/pos_loyalty/static/src/xml/ControlButtons/RewardButton.xml b/addons/pos_loyalty/static/src/xml/ControlButtons/RewardButton.xml
index c8116733e55..a0062adf79c 100644
--- a/addons/pos_loyalty/static/src/xml/ControlButtons/RewardButton.xml
+++ b/addons/pos_loyalty/static/src/xml/ControlButtons/RewardButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
      <t t-name="RewardButton" owl="1">
-        <span class="control-button" t-att-class="hasClaimableRewards() ? 'highlight' : 'disabled'">
+        <span class="control-button" t-att-class="hasClaimableRewards() ? 'highlight' : 'disabled'" t-on-click="() => this.click()">
             <i class="fa fa-star"></i>
             <span> </span>
             <span>Reward</span>
diff --git a/addons/pos_mercury/static/src/js/PaymentScreen.js b/addons/pos_mercury/static/src/js/PaymentScreen.js
index 78704a1879a..766e08259c0 100644
--- a/addons/pos_mercury/static/src/js/PaymentScreen.js
+++ b/addons/pos_mercury/static/src/js/PaymentScreen.js
@@ -121,24 +121,6 @@ patch(PaymentScreen.prototype, "pos_mercury.PaymentScreen", {
         res["useWithBarcode"] = true;
         return res;
     },
-    /**
-     * Finish any pending input before trying to validate.
-     *
-     * @override
-     */
-    async validateOrder(isForceValidate) {
-        this.numberBuffer.capture();
-        return this._super(...arguments);
-    },
-    /**
-     * Finish any pending input before sending a request to a terminal.
-     *
-     * @override
-     */
-    async _sendPaymentRequest({ detail: line }) {
-        this.numberBuffer.capture();
-        return this._super(...arguments);
-    },
     _get_swipe_pending_line() {
         var i = 0;
         var lines = this.env.pos.get_order().get_paymentlines();
@@ -545,19 +527,18 @@ patch(PaymentScreen.prototype, "pos_mercury.PaymentScreen", {
     /**
      * @override
      */
-    deletePaymentLine(event) {
-        const { cid } = event.detail;
+    deletePaymentLine(cid) {
         const line = this.paymentLines.find((line) => line.cid === cid);
         if (line.mercury_data) {
             this.do_reversal(line, false);
         } else {
-            this._super(event);
+            this._super(cid);
         }
     },
     /**
      * @override
      */
-    addNewPaymentLine({ detail: paymentMethod }) {
+    addNewPaymentLine(paymentMethod) {
         const order = this.env.pos.get_order();
         const res = this._super(...arguments);
         if (res && paymentMethod.pos_mercury_config_id) {
diff --git a/addons/pos_mercury/static/src/js/PaymentTransactionPopup.js b/addons/pos_mercury/static/src/js/PaymentTransactionPopup.js
index e558af77fb2..250ee5e7472 100644
--- a/addons/pos_mercury/static/src/js/PaymentTransactionPopup.js
+++ b/addons/pos_mercury/static/src/js/PaymentTransactionPopup.js
@@ -2,8 +2,7 @@
 
 import { AbstractAwaitablePopup } from "@point_of_sale/js/Popups/AbstractAwaitablePopup";
 import { _lt } from "@web/core/l10n/translation";
-
-const { useState } = owl;
+import { useState } from "@odoo/owl";
 
 export class PaymentTransactionPopup extends AbstractAwaitablePopup {
     static template = "PaymentTransactionPopup";
diff --git a/addons/pos_restaurant/static/src/app/navbar/BackToFloorButton.js b/addons/pos_restaurant/static/src/app/navbar/BackToFloorButton.js
index 0eea4425ebd..85d93ae11ff 100644
--- a/addons/pos_restaurant/static/src/app/navbar/BackToFloorButton.js
+++ b/addons/pos_restaurant/static/src/app/navbar/BackToFloorButton.js
@@ -1,9 +1,9 @@
 /** @odoo-module */
 
+import { Component } from "@odoo/owl";
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 
-export class BackToFloorButton extends LegacyComponent {
+export class BackToFloorButton extends Component {
     static template = "BackToFloorButton";
 
     setup() {
diff --git a/addons/pos_restaurant/static/src/app/pos_store.js b/addons/pos_restaurant/static/src/app/pos_store.js
index d290ce3e338..6a56d72d2c5 100644
--- a/addons/pos_restaurant/static/src/app/pos_store.js
+++ b/addons/pos_restaurant/static/src/app/pos_store.js
@@ -83,11 +83,10 @@ patch(PosStore.prototype, "pos_restaurant.PosStore", {
     },
     /**
      * @override
-     * FIXME POSREF this is now dead code, check if we still want this
      * Before closing pos, we remove the event listeners set on window
      * for detecting activities outside FloorScreen.
      */
-    async _closePos() {
+    async closePos() {
         if (IDLE_TIMER_SETTER) {
             for (const event of NON_IDLE_EVENTS) {
                 window.removeEventListener(event, IDLE_TIMER_SETTER);
diff --git a/addons/pos_restaurant/static/src/js/Screens/PaymentScreen.js b/addons/pos_restaurant/static/src/js/Screens/PaymentScreen.js
index 45a83c15b3e..91388055ab6 100644
--- a/addons/pos_restaurant/static/src/js/Screens/PaymentScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/PaymentScreen.js
@@ -1,7 +1,6 @@
 /** @odoo-module */
 
 import { PaymentScreen } from "@point_of_sale/js/Screens/PaymentScreen/PaymentScreen";
-import { useListener } from "@web/core/utils/hooks";
 import { patch } from "@web/core/utils/patch";
 
 patch(PaymentScreen, "pos_restaurant.PaymentScreen", {
@@ -11,22 +10,6 @@ patch(PaymentScreen, "pos_restaurant.PaymentScreen", {
 patch(PaymentScreen.prototype, "pos_restaurant.PaymentScreen", {
     setup() {
         this._super(...arguments);
-        useListener("send-payment-adjust", this._sendPaymentAdjust);
-    },
-    async _sendPaymentAdjust({ detail: line }) {
-        const previous_amount = line.get_amount();
-        const amount_diff = line.order.get_total_with_tax() - line.order.get_total_paid();
-        line.set_amount(previous_amount + amount_diff);
-        line.set_payment_status("waiting");
-
-        const payment_terminal = line.payment_method.payment_terminal;
-        const isAdjustSuccessful = await payment_terminal.send_payment_adjust(line.cid);
-        if (isAdjustSuccessful) {
-            line.set_payment_status("done");
-        } else {
-            line.set_amount(previous_amount);
-            line.set_payment_status("done");
-        }
     },
     get nextScreen() {
         const order = this.currentOrder;
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.js
index 7a14ca1e24f..cf8b7f831d1 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.js
@@ -1,22 +1,21 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { TextAreaPopup } from "@point_of_sale/js/Popups/TextAreaPopup";
+import { Component } from "@odoo/owl";
 
-export class OrderlineNoteButton extends LegacyComponent {
+export class OrderlineNoteButton extends Component {
     static template = "OrderlineNoteButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
     get selectedOrderline() {
         return this.env.pos.get_order().get_selected_orderline();
     }
-    async onClick() {
+    async click() {
         if (!this.selectedOrderline) {
             return;
         }
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/PrintBillButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/PrintBillButton.js
index d48e64ea450..1c84e45b4f3 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/PrintBillButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/PrintBillButton.js
@@ -1,23 +1,21 @@
 /** @odoo-module */
 
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
-export class PrintBillButton extends LegacyComponent {
+export class PrintBillButton extends Component {
     static template = "PrintBillButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this.onClick);
     }
     _isDisabled() {
         const order = this.env.pos.get_order();
         return order.get_orderlines().length === 0;
     }
-    onClick() {
+    click() {
         this.pos.showTempScreen("BillScreen");
     }
 }
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SplitBillButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SplitBillButton.js
index dad805ef7bd..177b85f34f6 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SplitBillButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SplitBillButton.js
@@ -1,17 +1,15 @@
 /** @odoo-module */
 
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
-export class SplitBillButton extends LegacyComponent {
+export class SplitBillButton extends Component {
     static template = "SplitBillButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this.onClick);
     }
     _isDisabled() {
         const order = this.env.pos.get_order();
@@ -21,7 +19,7 @@ export class SplitBillButton extends LegacyComponent {
                 .reduce((totalProduct, orderline) => totalProduct + orderline.quantity, 0) < 2
         );
     }
-    async onClick() {
+    async click() {
         this.pos.showScreen("SplitBillScreen");
     }
 }
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SubmitOrderButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SubmitOrderButton.js
index 31fac84ee18..7c9a25e2355 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SubmitOrderButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/SubmitOrderButton.js
@@ -1,9 +1,9 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { useService } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
 /**
  * IMPROVEMENT: Perhaps this class is quite complicated for its worth.
@@ -11,7 +11,7 @@ import { useService } from "@web/core/utils/hooks";
  * Also, the current order changes when the selectedOrder in pos is changed.
  * After setting new current order, we update the listeners.
  */
-export class SubmitOrderButton extends LegacyComponent {
+export class SubmitOrderButton extends Component {
     static template = "SubmitOrderButton";
 
     setup() {
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TableGuestsButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TableGuestsButton.js
index ccd56d56dbb..f0d994b296e 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TableGuestsButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TableGuestsButton.js
@@ -1,18 +1,17 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener, useService } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
 import { NumberPopup } from "@point_of_sale/js/Popups/NumberPopup";
 import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
+import { Component } from "@odoo/owl";
 
-export class TableGuestsButton extends LegacyComponent {
+export class TableGuestsButton extends Component {
     static template = "TableGuestsButton";
 
     setup() {
         super.setup();
         this.popup = useService("popup");
-        useListener("click", this.onClick);
     }
     get currentOrder() {
         return this.env.pos.get_order();
@@ -20,7 +19,7 @@ export class TableGuestsButton extends LegacyComponent {
     get nGuests() {
         return this.currentOrder ? this.currentOrder.getCustomerCount() : 0;
     }
-    async onClick() {
+    async click() {
         const { confirmed, payload: inputNumber } = await this.popup.add(NumberPopup, {
             startingValue: this.nGuests,
             cheap: true,
diff --git a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TransferOrderButton.js b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TransferOrderButton.js
index aa42c021f70..39021fcc57c 100644
--- a/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TransferOrderButton.js
+++ b/addons/pos_restaurant/static/src/js/Screens/ProductScreen/ControlButtons/TransferOrderButton.js
@@ -1,19 +1,17 @@
 /** @odoo-module */
 
 import { usePos } from "@point_of_sale/app/pos_hook";
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
+import { Component } from "@odoo/owl";
 
-export class TransferOrderButton extends LegacyComponent {
+export class TransferOrderButton extends Component {
     static template = "TransferOrderButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this.onClick);
     }
-    async onClick() {
+    async click() {
         this.env.pos.setCurrentOrderToTransfer();
         this.pos.showScreen("FloorScreen");
     }
diff --git a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
index e77b980f37c..36961b301dd 100644
--- a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitBillScreen.js
@@ -1,23 +1,19 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
-import { useListener } from "@web/core/utils/hooks";
 import { Order } from "@point_of_sale/js/models";
 
 import { SplitOrderline } from "./SplitOrderline";
 import { registry } from "@web/core/registry";
 import { usePos } from "@point_of_sale/app/pos_hook";
+import { Component, useState, onMounted  } from "@odoo/owl";
 
-const { useState, onMounted } = owl;
-
-export class SplitBillScreen extends LegacyComponent {
+export class SplitBillScreen extends Component {
     static template = "SplitBillScreen";
     static components = { SplitOrderline };
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click-line", this.onClickLine);
         this.splitlines = useState(this._initSplitLines(this.env.pos.get_order()));
         this.newOrderLines = {};
         this.newOrder = undefined;
@@ -42,8 +38,7 @@ export class SplitBillScreen extends LegacyComponent {
     get orderlines() {
         return this.currentOrder.get_orderlines();
     }
-    onClickLine(event) {
-        const line = event.detail;
+    onClickLine(line) {
         this._splitQuantity(line);
         this._updateNewOrder(line);
     }
diff --git a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitOrderline.js b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitOrderline.js
index 46032b2b090..7480e77af07 100644
--- a/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitOrderline.js
+++ b/addons/pos_restaurant/static/src/js/Screens/SplitBillScreen/SplitOrderline.js
@@ -1,19 +1,17 @@
 /** @odoo-module */
 
-import { useListener } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class SplitOrderline extends LegacyComponent {
+export class SplitOrderline extends Component {
     static template = "SplitOrderline";
 
     setup() {
         super.setup();
-        useListener("click", this.onClick);
     }
     get isSelected() {
         return this.props.split.quantity !== 0;
     }
-    onClick() {
-        this.trigger("click-line", this.props.line);
+    click() {
+        this.props.onClickLine(this.props.line);
     }
 }
diff --git a/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js b/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js
index 544e054f7c4..7c1890b2cf2 100644
--- a/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/TicketScreen.js
@@ -1,12 +1,10 @@
 /** @odoo-module */
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { TicketScreen } from "@point_of_sale/js/Screens/TicketScreen/TicketScreen";
 import { useAutofocus } from "@web/core/utils/hooks";
 import { patch } from "@web/core/utils/patch";
 import { parse } from "web.field_utils";
 import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
-
-const { useState } = owl;
+import { Component, useState } from "@odoo/owl";
 
 patch(TicketScreen.prototype, "pos_restaurant.TicketScreen", {
     _getScreenToStatusMap() {
@@ -78,7 +76,7 @@ patch(TicketScreen.prototype, "pos_restaurant.TicketScreen", {
         }
     },
     //@override
-    async _onDeleteOrder() {
+    async onDeleteOrder() {
         await this._super(...arguments);
         if (this.env.pos.config.iface_floorplan) {
             if (!this.env.pos.table) {
@@ -145,7 +143,7 @@ patch(TicketScreen.prototype, "pos_restaurant.TicketScreen", {
         }
         return result;
     },
-    async _onDoRefund() {
+    async onDoRefund() {
         if (this.env.pos.config.iface_floorplan) {
             this.env.pos.setTable(
                 this.getSelectedSyncedOrder().table
@@ -163,7 +161,7 @@ patch(TicketScreen.prototype, "pos_restaurant.TicketScreen", {
     },
 });
 
-export class TipCell extends LegacyComponent {
+export class TipCell extends Component {
     static template = "TipCell";
 
     setup() {
diff --git a/addons/pos_restaurant/static/src/js/Screens/TipScreen.js b/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
index 60197c6631c..c46ded946e3 100644
--- a/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
+++ b/addons/pos_restaurant/static/src/js/Screens/TipScreen.js
@@ -1,6 +1,5 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { parse } from "web.field_utils";
 import { renderToString } from "@web/core/utils/render";
 import { registry } from "@web/core/registry";
@@ -8,16 +7,17 @@ import { ErrorPopup } from "@point_of_sale/js/Popups/ErrorPopup";
 import { ConfirmPopup } from "@point_of_sale/js/Popups/ConfirmPopup";
 import { usePos } from "@point_of_sale/app/pos_hook";
 import { useService } from "@web/core/utils/hooks";
+import { Component, useRef, onMounted } from "@odoo/owl";
 
-const { onMounted } = owl;
-
-export class TipScreen extends LegacyComponent {
+export class TipScreen extends Component {
     static template = "pos_restaurant.TipScreen";
     static showBackToFloorButton = true;
     setup() {
         super.setup();
         this.pos = usePos();
+        this.posReceiptContainer = useRef("pos-receipt-container");
         this.popup = useService("popup");
+        this.rpc = useService("rpc");
         this.state = this.currentOrder.uiState.TipScreen;
         this._totalAmount = this.currentOrder.get_total_with_tax();
 
@@ -152,7 +152,7 @@ export class TipScreen extends LegacyComponent {
 
     async _printWeb(receipt) {
         try {
-            $(this.el).find(".pos-receipt-container").html(receipt);
+            this.posReceiptContainer.el.innerHTML = receipt;
             window.print();
         } catch {
             await this.popup.add(ErrorPopup, {
diff --git a/addons/pos_restaurant/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml b/addons/pos_restaurant/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
index 50a2b7baa96..17e3e6a7cf9 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
@@ -4,12 +4,12 @@
     <t t-name="PaymentScreenPaymentLines" t-inherit="point_of_sale.PaymentScreenPaymentLines" t-inherit-mode="extension" owl="1">
         <xpath expr="//div[hasclass('send_payment_reversal')]/.." position="replace">
             <t t-if="line.canBeAdjusted() &amp;&amp; line.order.get_total_paid() &lt; line.order.get_total_with_tax()">
-                <div class="button send_adjust_amount" title="Adjust Amount" t-on-click="() => this.trigger('send-payment-adjust', line)">
+                <div class="button send_adjust_amount" title="Adjust Amount" t-on-click="() => this.sendPaymentAdjust(line)">
                     Adjust Amount
                 </div>
             </t>
             <t t-elif="line.can_be_reversed">
-                <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="() => this.trigger('send-payment-reverse', line)">
+                <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="() => this.props.sendPaymentReverse(line)">
                     Reverse
                 </div>
             </t>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.xml b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.xml
index 083b2e45f8d..0f4c6efb635 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/OrderlineNoteButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="OrderlineNoteButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-tag" />
             <span> </span>
             <span>Internal Note</span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/PrintBillButton.xml b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/PrintBillButton.xml
index 50ed996b9d0..83fd8bcbe7b 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/PrintBillButton.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/PrintBillButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="PrintBillButton" owl="1">
-        <span class="control-button order-printbill" t-att-class="{'disabled': _isDisabled()}">
+        <span class="control-button order-printbill" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
             <i class="fa fa-print"></i>
             <span> </span>
             <span>Bill</span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/SplitBillButton.xml b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/SplitBillButton.xml
index f90697f989c..833836b5b6b 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/SplitBillButton.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/SplitBillButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SplitBillButton" owl="1">
-        <span class="control-button order-split" t-att-class="{'disabled': _isDisabled()}">
+        <span class="control-button order-split" t-att-class="{'disabled': _isDisabled()}" t-on-click="() => this.click()">
             <i class="fa fa-files-o"></i>
             <span> </span>
             <span>Split</span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TableGuestsButton.xml b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TableGuestsButton.xml
index 5a33b17ec32..09e0bb0411e 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TableGuestsButton.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TableGuestsButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="TableGuestsButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <span class="control-button-number">
                 <t t-esc="nGuests" />
             </span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TransferOrderButton.xml b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TransferOrderButton.xml
index 6eb0c975573..4096e7c26ab 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TransferOrderButton.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/ProductScreen/ControlButtons/TransferOrderButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="TransferOrderButton" owl="1">
-        <div class="control-button">
+        <div class="control-button" t-on-click="() => this.click()">
             <i class="fa fa-arrow-right" />
             <span> </span>
             <span>Transfer</span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
index 95b1a27232d..8a7def294c2 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitBillScreen.xml
@@ -19,7 +19,10 @@
                         <div class="order">
                             <ul class="orderlines">
                                 <t t-foreach="orderlines" t-as="line" t-key="line.cid">
-                                    <SplitOrderline line="line" split="splitlines[line.id]" />
+                                    <SplitOrderline
+                                        onClickLine.bind="onClickLine"
+                                        line="line"
+                                        split="splitlines[line.id]" />
                                 </t>
                             </ul>
                         </div>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitOrderline.xml b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitOrderline.xml
index fd71374fa98..b11746086d2 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitOrderline.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/SplitBillScreen/SplitOrderline.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SplitOrderline" owl="1">
-        <li class="orderline" t-att-class="{ selected: isSelected, partially: props.split.quantity !== props.line.get_quantity() }">
+        <li class="orderline" t-att-class="{ selected: isSelected, partially: props.split.quantity !== props.line.get_quantity() }" t-on-click="() => this.click()">
             <span class="product-name">
                 <t t-esc="props.line.get_product().display_name" />
             </span>
diff --git a/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml b/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
index d35b22410f2..93e2b41d2a7 100644
--- a/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
+++ b/addons/pos_restaurant/static/src/xml/Screens/TipScreen.xml
@@ -3,7 +3,7 @@
 
     <t t-name="pos_restaurant.TipScreen" owl="1">
         <div class="tip-screen screen">
-            <div class="pos-receipt-container"/>
+            <div class="pos-receipt-container" t-ref="pos-receipt-container"/>
             <div class="screen-content">
                 <div class="top-content">
                     <span class="button back" t-on-click="() => this.pos.showScreen('FloorScreen')">
diff --git a/addons/pos_sale/static/src/js/OrderManagementScreen/MobileSaleOrderManagementScreen.js b/addons/pos_sale/static/src/js/OrderManagementScreen/MobileSaleOrderManagementScreen.js
index 6a03cdd5a9e..46ee6730853 100644
--- a/addons/pos_sale/static/src/js/OrderManagementScreen/MobileSaleOrderManagementScreen.js
+++ b/addons/pos_sale/static/src/js/OrderManagementScreen/MobileSaleOrderManagementScreen.js
@@ -1,18 +1,16 @@
 /** @odoo-module */
 import { SaleOrderManagementScreen } from "@pos_sale/js/OrderManagementScreen/SaleOrderManagementScreen";
-import { useListener } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
-
-const { useState } = owl;
+import { useState } from "@odoo/owl";
 
 export class MobileSaleOrderManagementScreen extends SaleOrderManagementScreen {
     static template = "MobileSaleOrderManagementScreen";
     setup() {
         super.setup();
-        useListener("click-order", this._onShowDetails);
         this.mobileState = useState({ showDetails: false });
     }
-    _onShowDetails() {
+    async onClickSaleOrder() {
+        await this.super();
         this.mobileState.showDetails = true;
     }
 }
diff --git a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderList.js b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderList.js
index 4c183fdab10..c07a59559fa 100644
--- a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderList.js
+++ b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderList.js
@@ -1,29 +1,24 @@
 /** @odoo-module */
 
-import { useListener } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
-
+import { Component, useState } from "@odoo/owl";
 import { SaleOrderRow } from "./SaleOrderRow";
 
-const { useState } = owl;
-
 /**
  * @props {models.Order} [initHighlightedOrder] initially highligted order
  * @props {Array<models.Order>} orders
  */
-export class SaleOrderList extends LegacyComponent {
+export class SaleOrderList extends Component {
     static components = { SaleOrderRow };
     static template = "SaleOrderList";
 
     setup() {
         super.setup();
-        useListener("click-order", this._onClickOrder);
         this.state = useState({ highlightedOrder: this.props.initHighlightedOrder || null });
     }
     get highlightedOrder() {
         return this.state.highlightedOrder;
     }
-    _onClickOrder({ detail: order }) {
+    _onClickOrder(order) {
         this.state.highlightedOrder = order;
     }
 }
diff --git a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementControlPanel.js b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementControlPanel.js
index 3ec2efb4436..688f301ea6c 100644
--- a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementControlPanel.js
+++ b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementControlPanel.js
@@ -1,10 +1,8 @@
 /** @odoo-module */
 
-import { useAutofocus, useListener, useService } from "@web/core/utils/hooks";
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { useAutofocus, useService } from "@web/core/utils/hooks";
 import { orderManagement } from "@point_of_sale/js/PosContext";
-
-const { useState } = owl;
+import { Component, useState } from "@odoo/owl";
 
 // NOTE: These are constants so that they are only instantiated once
 // and they can be used efficiently by the OrderManagementControlPanel.
@@ -19,19 +17,15 @@ const FIELD_MAP = {
 const SEARCH_FIELDS = ["name", "partner_id.display_name", "date_order"];
 
 /**
- * @emits close-screen
- * @emits prev-page
- * @emits next-page
  * @emits search
  */
-export class SaleOrderManagementControlPanel extends LegacyComponent {
+export class SaleOrderManagementControlPanel extends Component {
     static template = "SaleOrderManagementControlPanel";
 
     setup() {
         super.setup();
         this.saleOrderFetcher = useService("sale_order_fetcher");
         this.orderManagementContext = useState(orderManagement);
-        useListener("clear-search", this._onClearSearch);
         useAutofocus();
 
         const currentPartner = this.env.pos.get_order().get_partner();
@@ -42,7 +36,7 @@ export class SaleOrderManagementControlPanel extends LegacyComponent {
     }
     onInputKeydown(event) {
         if (event.key === "Enter") {
-            this.trigger("search", this._computeDomain());
+            this.props.onSearch(this._computeDomain());
         }
     }
     get showPageControls() {
@@ -123,7 +117,7 @@ export class SaleOrderManagementControlPanel extends LegacyComponent {
         }
         return domain;
     }
-    _onClearSearch() {
+    clearSearch() {
         this.orderManagementContext.searchString = "";
         this.onInputKeydown({ key: "Enter" });
     }
diff --git a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementScreen.js b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementScreen.js
index c349dcac34b..feb9a3fc0c1 100644
--- a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementScreen.js
+++ b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderManagementScreen.js
@@ -2,7 +2,7 @@
 
 import { sprintf } from "web.utils";
 import { parse } from "web.field_utils";
-import { useBus, useListener, useService } from "@web/core/utils/hooks";
+import { useBus, useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { ControlButtonsMixin } from "@point_of_sale/js/ControlButtonsMixin";
 import { IndependentToOrderScreen } from "@point_of_sale/js/Misc/IndependentToOrderScreen";
@@ -16,8 +16,7 @@ import { NumberPopup } from "@point_of_sale/js/Popups/NumberPopup";
 
 import { SaleOrderList } from "./SaleOrderList";
 import { SaleOrderManagementControlPanel } from "./SaleOrderManagementControlPanel";
-
-const { onMounted, useState } = owl;
+import { onMounted, useRef, useState } from "@odoo/owl";
 
 export class SaleOrderManagementScreen extends ControlButtonsMixin(IndependentToOrderScreen) {
     static components = { SaleOrderList, SaleOrderManagementControlPanel };
@@ -26,13 +25,10 @@ export class SaleOrderManagementScreen extends ControlButtonsMixin(IndependentTo
     setup() {
         super.setup();
         this.popup = useService("popup");
+        this.rpc = useService("rpc");
+        this.root = useRef("root");
         this.numberBuffer = useService("number_buffer");
         this.saleOrderFetcher = useService("sale_order_fetcher");
-        useListener("close-screen", this.close);
-        useListener("click-sale-order", this._onClickSaleOrder);
-        useListener("next-page", this._onNextPage);
-        useListener("prev-page", this._onPrevPage);
-        useListener("search", this._onSearch);
 
         useBus(this.saleOrderFetcher, "update", this.render);
         this.orderManagementContext = useState(orderManagement);
@@ -43,9 +39,9 @@ export class SaleOrderManagementScreen extends ControlButtonsMixin(IndependentTo
         // calculate how many can fit in the screen.
         // It is based on the height of the header element.
         // So the result is only accurate if each row is just single line.
-        const flexContainer = this.el.querySelector(".flex-container");
-        const cpEl = this.el.querySelector(".control-panel");
-        const headerEl = this.el.querySelector(".header-row");
+        const flexContainer = this.root.el.querySelector(".flex-container");
+        const cpEl = this.root.el.querySelector(".control-panel");
+        const headerEl = this.root.el.querySelector(".header-row");
         const val = Math.trunc(
             (flexContainer.offsetHeight - cpEl.offsetHeight - headerEl.offsetHeight) /
                 headerEl.offsetHeight
@@ -65,19 +61,18 @@ export class SaleOrderManagementScreen extends ControlButtonsMixin(IndependentTo
         this.numpadMode = mode;
         this.numberBuffer.reset();
     }
-    _onNextPage() {
+    onNextPage() {
         this.saleOrderFetcher.nextPage();
     }
-    _onPrevPage() {
+    onPrevPage() {
         this.saleOrderFetcher.prevPage();
     }
-    _onSearch({ detail: domain }) {
+    onSearch({ detail: domain }) {
         this.saleOrderFetcher.setSearchDomain(domain);
         this.saleOrderFetcher.setPage(1);
         this.saleOrderFetcher.fetch();
     }
-    async _onClickSaleOrder(event) {
-        const clickedOrder = event.detail;
+    async onClickSaleOrder(clickedOrder) {
         const { confirmed, payload: selectedOption } = await this.popup.add(SelectionPopup, {
             title: this.env._t("What do you want to do?"),
             list: [
diff --git a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderRow.js b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderRow.js
index 700eb0d3af3..3257274d9cf 100644
--- a/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderRow.js
+++ b/addons/pos_sale/static/src/js/OrderManagementScreen/SaleOrderRow.js
@@ -1,6 +1,6 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 import utils from "web.utils";
 
 /**
@@ -8,7 +8,7 @@ import utils from "web.utils";
  * @props columns
  * @emits click-order
  */
-export class SaleOrderRow extends LegacyComponent {
+export class SaleOrderRow extends Component {
     static template = "SaleOrderRow";
 
     get order() {
diff --git a/addons/pos_sale/static/src/js/SetSaleOrderButton.js b/addons/pos_sale/static/src/js/SetSaleOrderButton.js
index 59712001c5e..138f0010679 100644
--- a/addons/pos_sale/static/src/js/SetSaleOrderButton.js
+++ b/addons/pos_sale/static/src/js/SetSaleOrderButton.js
@@ -1,22 +1,21 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
 import { ProductScreen } from "@point_of_sale/js/Screens/ProductScreen/ProductScreen";
-import { useListener } from "@web/core/utils/hooks";
 import { usePos } from "@point_of_sale/app/pos_hook";
-
-export class SetSaleOrderButton extends LegacyComponent {
+import { Component } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+export class SetSaleOrderButton extends Component {
     static template = "SetSaleOrderButton";
 
     setup() {
         super.setup();
         this.pos = usePos();
-        useListener("click", this.onClick);
+        this.rpc = useService("rpc");
     }
     get currentOrder() {
         return this.env.pos.get_order();
     }
-    async onClick() {
+    async click() {
         // ping the server, if no error, show the screen
         // Use rpc from services which resolves even when this
         // component is destroyed (removed together with the popup).
diff --git a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderList.xml b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderList.xml
index 62d5c497cd8..21b023d3166 100644
--- a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderList.xml
+++ b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderList.xml
@@ -13,7 +13,10 @@
             </div>
             <div class="order-list">
                 <t t-foreach="props.orders" t-as="order" t-key="order.id">
-                    <SaleOrderRow order="order" highlightedOrder="highlightedOrder" />
+                    <SaleOrderRow
+                        onClickSaleOrder.bind="props.onClickSaleOrder"
+                        order="order"
+                        highlightedOrder="highlightedOrder" />
                 </t>
             </div>
         </div>
diff --git a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementControlPanel.xml b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementControlPanel.xml
index 74fefcc7b29..d99a37da873 100644
--- a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementControlPanel.xml
+++ b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementControlPanel.xml
@@ -3,7 +3,7 @@
 
     <t t-name="SaleOrderManagementControlPanel" owl="1">
         <div class="control-panel">
-            <div class="item button back" t-on-click="() => this.trigger('close-screen')">
+            <div class="item button back" t-on-click="() => this.props.close()">
                 <i class="fa fa-angle-double-left"></i>
                 <span t-if="!env.isMobile"> Back</span>
             </div>
@@ -12,16 +12,16 @@
                     <i class="fa fa-search" />
                 </span>
                 <input type="text" t-ref="autofocus" t-model="orderManagementContext.searchString" t-on-keydown="onInputKeydown" placeholder="E.g. customer: Steward, date: 2020-05-09" />
-                <span class="clear" t-on-click="() => this.trigger('clear-search')">
+                <span class="clear" t-on-click="() => this.clearSearch()">
                     <i class="fa fa-remove" />
                 </span>
             </div>
             <div t-if="showPageControls" class="item">
                 <div class="page-controls">
-                    <div class="previous" t-on-click="() => this.trigger('prev-page')">
+                    <div class="previous" t-on-click="() => this.props.onPrevPage">
                         <i class="fa fa-fw fa-caret-left" role="img" aria-label="Previous Order List" title="Previous Order List"></i>
                     </div>
-                    <div class="next" t-on-click="() => this.trigger('next-page')">
+                    <div class="next" t-on-click="() => this.props.onNextPage">
                         <i class="fa fa-fw fa-caret-right" role="img" aria-label="Next Order List" title="Next Order List"></i>
                     </div>
                 </div>
diff --git a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementScreen.xml b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementScreen.xml
index 111488575ca..be64fee067f 100644
--- a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementScreen.xml
+++ b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderManagementScreen.xml
@@ -2,11 +2,18 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SaleOrderManagementScreen" owl="1">
-        <div class="order-management-screen screen" t-att-class="{ oe_hidden: !props.isShown }">
+        <div class="order-management-screen screen" t-att-class="{ oe_hidden: !props.isShown }" t-ref="root">
                 <div class="rightpane">
                     <div class="flex-container">
-                        <SaleOrderManagementControlPanel />
-                        <SaleOrderList orders="orders" initHighlightedOrder="orderManagementContext.selectedOrder" />
+                        <SaleOrderManagementControlPanel
+                            close.bind="close"
+                            onSearch.bind="onSearch"
+                            onPrevPage.bind="onPrevPage"
+                            onNextPage.bind="onNextPage" />
+                        <SaleOrderList
+                            onClickSaleOrder.bind="onClickSaleOrder"
+                            orders="orders"
+                            initHighlightedOrder="orderManagementContext.selectedOrder" />
                     </div>
                 </div>
         </div>
diff --git a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderRow.xml b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderRow.xml
index a6995dca38c..019cc9fa5d8 100644
--- a/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderRow.xml
+++ b/addons/pos_sale/static/src/xml/OrderManagementScreen/SaleOrderRow.xml
@@ -4,7 +4,7 @@
     <t t-name="SaleOrderRow" owl="1">
         <div class="order-row"
         t-att-class="{ highlight: highlighted }"
-        t-on-click="() => this.trigger('click-sale-order', props.order)">
+        t-on-click="() => this.props.onClickSaleOrder(props.order)">
             <div class="col name">
                 <div t-if="env.isMobile">Order</div>
                 <div><t t-esc="name"/></div>
diff --git a/addons/pos_sale/static/src/xml/SetSaleOrderButton.xml b/addons/pos_sale/static/src/xml/SetSaleOrderButton.xml
index 8504e372687..98012aaefa4 100644
--- a/addons/pos_sale/static/src/xml/SetSaleOrderButton.xml
+++ b/addons/pos_sale/static/src/xml/SetSaleOrderButton.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SetSaleOrderButton" owl="1">
-        <div class="control-button o_sale_order_button">
+        <div class="control-button o_sale_order_button" t-on-click="() => this.click()">
             <i class="fa fa-link" role="img" aria-label="Set Sale Order"
                title="Set Sale Order" /> Quotation/Order
         </div>
diff --git a/addons/pos_six/static/src/js/BalanceButton.js b/addons/pos_six/static/src/js/BalanceButton.js
index fb5f8d1e34d..fb5937521ed 100644
--- a/addons/pos_six/static/src/js/BalanceButton.js
+++ b/addons/pos_six/static/src/js/BalanceButton.js
@@ -1,8 +1,8 @@
 /** @odoo-module */
 
-import { LegacyComponent } from "@web/legacy/legacy_component";
+import { Component } from "@odoo/owl";
 
-export class BalanceButton extends LegacyComponent {
+export class BalanceButton extends Component {
     static template = "BalanceButton";
 
     sendBalance() {