From 43e908ce7d7fbc2d6933268271bfcd67639fdc64 Mon Sep 17 00:00:00 2001
From: Suherdy Yacob <suherdy.yacob@mapan.co.id>
Date: Mon, 11 May 2026 17:26:57 +0700
Subject: [PATCH] refactor: replace lifecycle hooks with useEffect and improve
 state initialization in OrderDisplay to prevent patch conflicts

---
 .../order_display/order_display_patch.js      | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/static/src/app/components/order_display/order_display_patch.js b/static/src/app/components/order_display/order_display_patch.js
index 5517521..be49fee 100644
--- a/static/src/app/components/order_display/order_display_patch.js
+++ b/static/src/app/components/order_display/order_display_patch.js
@@ -2,44 +2,47 @@
 
 import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";
 import { patch } from "@web/core/utils/patch";
-import { useState, onMounted, onWillUnmount } from "@odoo/owl";
+import { useState, useEffect } from "@odoo/owl";
 
 patch(OrderDisplay.prototype, {
     setup() {
         super.setup();
-        this.state = useState({ displayedCount: 20 });
+        // Use Object.assign to avoid overwriting state from other patches (e.g. pos_urban_piper)
+        if (this.state) {
+            Object.assign(this.state, { displayedCount: 20 });
+        } else {
+            this.state = useState({ displayedCount: 20 });
+        }
 
-        onMounted(() => {
-            const scrollable = this.scrollableRef.el;
-            if (!scrollable) {
-                return;
-            }
-
-            this.onScroll = () => {
-                if (
-                    scrollable.scrollTop + scrollable.clientHeight >=
-                    scrollable.scrollHeight - 100
-                ) {
-                    if (this.state.displayedCount < this.comboSortedLines.length) {
-                        this.state.displayedCount += 20;
-                    }
+        // Use useEffect to handle dynamic mounting of the scrollable element
+        useEffect(
+            (scrollable) => {
+                if (!scrollable) {
+                    return;
                 }
-            };
-            scrollable.addEventListener("scroll", this.onScroll);
 
-            // Ensure selected line is visible by expanding displayedCount if needed
-            const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
-            if (selectedLineIndex >= this.state.displayedCount) {
-                this.state.displayedCount = selectedLineIndex + 1;
-            }
-        });
+                const onScroll = () => {
+                    if (
+                        scrollable.scrollTop + scrollable.clientHeight >=
+                        scrollable.scrollHeight - 100
+                    ) {
+                        if (this.state.displayedCount < this.comboSortedLines.length) {
+                            this.state.displayedCount += 20;
+                        }
+                    }
+                };
+                scrollable.addEventListener("scroll", onScroll);
+                
+                // Ensure selected line is visible by expanding displayedCount if needed
+                const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
+                if (selectedLineIndex >= this.state.displayedCount) {
+                    this.state.displayedCount = selectedLineIndex + 1;
+                }
 
-        onWillUnmount(() => {
-            const el = this.scrollableRef.el;
-            if (el) {
-                el.removeEventListener("scroll", this.onScroll);
-            }
-        });
+                return () => scrollable.removeEventListener("scroll", onScroll);
+            },
+            () => [this.scrollableRef?.el]
+        );
     },
 
     get linesToDisplay() {