Add more logs

packages/checkout/widgets-lib/src/context/handover-context/HandoverProvider.tsx

@@ -1,8 +1,6 @@
+/* eslint-disable no-console */
 import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
+  useCallback, useEffect, useMemo, useState,
 } from 'react';
 import {
   HandoverContent,
@@ -29,7 +27,9 @@ const MINIMUM_DURATION = 2000; // Minimum duration in milliseconds (2 seconds)
 export function HandoverProvider({ children }: HandoverProviderProps) {
   const [handovers, setHandovers] = useState<HandoverState>({});
   const [handoverQueue, setHandoverQueue] = useState<HandoverQueue>({});
-  const [handoverBusy, setHandoverBusy] = useState<{ [key in HandoverTarget]?: boolean }>({});
+  const [handoverBusy, setHandoverBusy] = useState<{
+    [key in HandoverTarget]?: boolean;
+  }>({});
 
   const [loader, setLoader] = useState<HandoverLoader | null>(null);
   const isLoading = useMemo(() => loader !== null, [loader]);
@@ -49,6 +49,8 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
           handoverContent.onClose();
         }
 
+        console.log('@@@Closing handover', handoverId);
+
         return newHandovers;
       });
     },
@@ -57,21 +59,20 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
 
   const processQueue = useCallback(
     (handoverId: HandoverTarget, autoClose: boolean = false) => {
-      if (handoverBusy[handoverId as HandoverTarget]) return;
+      console.log('@@@Processing queue for', handoverId);
+      if (handoverBusy[handoverId]) return;
 
       const updatedQueue = { ...handoverQueue };
       const queuedContent = updatedQueue[handoverId] ?? [];
       if (queuedContent.length > 0) {
         const nextHandoverContent = queuedContent.shift();
 
-        // Use the next handover content from the queue
         if (nextHandoverContent) {
           setHandovers((prev) => ({
             ...prev,
             [handoverId]: nextHandoverContent,
           }));
 
-          // Allow for fixed duration handover content
           const contentDuration = nextHandoverContent.duration ?? 0;
           const effectiveDuration = Math.max(contentDuration, MINIMUM_DURATION);
 
@@ -80,11 +81,12 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
             [handoverId]: true,
           }));
           setTimeout(() => {
-            // Mark as not busy so it can be shuffled as required
             setHandoverBusy((prev) => ({
               ...prev,
               [handoverId]: false,
             }));
+            console.log('@@@Timeout complete for', handoverId);
+            processQueue(handoverId, autoClose);
           }, effectiveDuration);
         } else {
           delete updatedQueue[handoverId];
@@ -94,7 +96,6 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
           setHandoverQueue(updatedQueue);
         }
       } else {
-        // If the queue is empty and the current handover has a duration, safe to close
         const currentHandover = handovers[handoverId];
         if (currentHandover?.duration && currentHandover.duration > 0) {
           closeHandover(handoverId);
@@ -108,9 +109,7 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
     handoverContent: HandoverContent,
     handoverId: HandoverTarget = HandoverTarget.GLOBAL,
   ) => {
-    // eslint-disable-next-line no-console
     console.log('@@@Adding handover', handoverContent, handoverId);
-    // Add the handover content to the queue / ensure no mutation of the queue
     setHandoverQueue((prevQueue) => {
       const updatedQueue = { ...prevQueue };
       const queuedContent = [...(updatedQueue[handoverId] ?? [])];
@@ -121,29 +120,33 @@ export function HandoverProvider({ children }: HandoverProviderProps) {
   };
 
   useEffect(() => {
+    console.log('@@@useEffect triggered for handoverQueue');
     Object.keys(handoverQueue).forEach((handoverId) => {
       processQueue(handoverId as HandoverTarget);
     });
   }, [handoverQueue, handoverBusy, processQueue]);
 
-  const value = useMemo(() => ({
-    loader,
-    isLoading,
-    hideLoader,
-    showLoader: (handoverLoader: HandoverLoader) => {
-      const text = Array.isArray(handoverLoader.text) ? handoverLoader.text : [handoverLoader.text];
-      setLoader({ ...handoverLoader, text: [...text] });
-    },
-    handovers,
-    addHandover,
-    closeHandover,
-  }), [loader, isLoading, hideLoader, handovers, addHandover, closeHandover]);
+  const value = useMemo(
+    () => ({
+      loader,
+      isLoading,
+      hideLoader,
+      showLoader: (handoverLoader: HandoverLoader) => {
+        const text = Array.isArray(handoverLoader.text)
+          ? handoverLoader.text
+          : [handoverLoader.text];
+        setLoader({ ...handoverLoader, text: [...text] });
+      },
+      handovers,
+      addHandover,
+      closeHandover,
+    }),
+    [loader, isLoading, hideLoader, handovers, addHandover, closeHandover],
+  );
 
   return (
     <HandoverContext.Provider value={value}>
-      <Handover id="global">
-        {children}
-      </Handover>
+      <Handover id="global">{children}</Handover>
     </HandoverContext.Provider>
   );
 }