[FeaturedBrandsPanel] added findAndFocusFirstContainer

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -117,23 +117,6 @@ const shouldRenderComponent = (data) => {
   return false;
 };
 
-// const shouldPopPlayerPreview = (spotlightId, topMargin = 0) => {
-//   try {
-//     const node = document //
-//       .querySelector(`[data-spotlight-id="${spotlightId}"]`);
-
-//     if (node) {
-//       const nodeTop = getBoundingClientRect(node).top;
-//       return nodeTop !== topMargin;
-//     } else {
-//       throw new Error("node not found");
-//     }
-//   } catch (error) {
-//     console.warn(error.message);
-//     return false;
-//   }
-// };
-
 const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
   try {
     if (currentAttempts >= maxAttempts) {
@@ -152,6 +135,31 @@ const findSelector = (selector, maxAttempts = 5, currentAttempts = 0) => {
   }
 };
 
+const findAndFocusFirstContainer = (timerRef) => {
+  if (typeof window === "object") {
+    const containers = document.querySelectorAll("[data-wheel-point]");
+    const firstContainer = Array.from(containers).find(
+      (container) => window.getComputedStyle(container)?.order === "1"
+    );
+
+    if (firstContainer) {
+      Spotlight.focus(firstContainer);
+      clearTimeout(timerRef.current?.timer);
+      timerRef.current.timer = null;
+      timerRef.current.attemptCount = 0;
+      return;
+    }
+
+    if (timerRef.current.attemptCount < 5) {
+      timerRef.current.attemptCount += 1;
+      timerRef.current.timer = setTimeout(
+        () => findAndFocusFirstContainer(timerRef),
+        200
+      );
+    }
+  }
+};
+
 const getMessageByPopupType = (type) => {
   switch (type) {
     case ACTIVE_POPUP.reminderPopup:
@@ -267,7 +275,10 @@ export default function FeaturedBrandsPanel({
   const cbChangePageRef = useRef(null);
   const displayTopButtonTimerRef = useRef(null);
   const orderableFlexContainerRef = useRef(null);
-  const noneTargetTimer = useRef(null);
+  const noneTargetTimer = useRef({
+    timer: null,
+    attemptCount: 0,
+  });
 
   const fromDeepLink = Object.entries(panelInfo) //
     .some(([key, value]) => key === "linkTpCd" && value);
@@ -464,9 +475,7 @@ export default function FeaturedBrandsPanel({
           //   "background: red; color: white"
           // );
 
-          noneTargetTimer.current = setTimeout(() => {
-            Spotlight.focus(document.querySelector(`[data-wheel-point]`));
-          }, 200);
+          findAndFocusFirstContainer(noneTargetTimer);
         }
 
         setIsInitialFocusOccurred(true);