react-native-acoustic-connect-beta 18.0.14 → 18.0.16

package/src/utils/DialogListener.ts

@@ -0,0 +1,238 @@
+/********************************************************************************************
+* Copyright (C) 2025 Acoustic, L.P. All rights reserved.
+*
+* NOTICE: This file contains material that is confidential and proprietary to
+* Acoustic, L.P. and/or other developers. No license is granted under any intellectual or
+* industrial property rights of Acoustic, L.P. except as may be provided in an agreement with
+* Acoustic, L.P. Any unauthorized copying or distribution of content from this file is
+* prohibited.
+********************************************************************************************/
+
+import { Alert, Platform } from 'react-native';
+import type { AlertButton, AlertOptions } from 'react-native';
+
+export interface DialogEvent {
+    dialogId: string;
+    dialogTitle: string;
+    dialogType: 'alert' | 'custom' | 'modal';
+    timestamp: number;
+    buttons?: AlertButton[];
+}
+
+export interface DialogButtonClickEvent {
+    dialogId: string;
+    buttonText: string;
+    buttonIndex: number;
+    timestamp: number;
+}
+
+export interface DialogDismissEvent {
+    dialogId: string;
+    dialogTitle: string;
+    dialogType: 'alert' | 'custom' | 'modal';
+    dismissReason: string;
+    timestamp: number;
+}
+
+// Simple ID generator
+function generateId(): string {
+    return Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
+}
+
+class DialogListener {
+    private static instance: DialogListener;
+    private activeDialogs: Map<string, DialogEvent> = new Map();
+    private originalAlert: typeof Alert.alert;
+    private isIntercepting: boolean = false;
+    private eventCallbacks: Array<(event: DialogEvent | DialogButtonClickEvent | DialogDismissEvent) => void> = [];
+
+    private constructor() {
+        this.originalAlert = Alert.alert;
+        this.interceptAlertAPI();
+    }
+
+    static getInstance(): DialogListener {
+        if (!DialogListener.instance) {
+            DialogListener.instance = new DialogListener();
+        }
+        return DialogListener.instance;
+    }
+
+    /**
+     * Start intercepting dialog events
+     */
+    startIntercepting(): void {
+        if (this.isIntercepting) return;
+        this.isIntercepting = true;
+        console.log('DialogListener: Started intercepting dialog events');
+    }
+
+    /**
+     * Stop intercepting dialog events
+     */
+    stopIntercepting(): void {
+        if (!this.isIntercepting) return;
+        this.isIntercepting = false;
+        console.log('DialogListener: Stopped intercepting dialog events');
+    }
+
+    /**
+     * Add event callback for dialog events
+     */
+    addEventListener(callback: (event: DialogEvent | DialogButtonClickEvent | DialogDismissEvent) => void): () => void {
+        this.eventCallbacks.push(callback);
+        return () => {
+            const index = this.eventCallbacks.indexOf(callback);
+            if (index > -1) {
+                this.eventCallbacks.splice(index, 1);
+            }
+        };
+    }
+
+    /**
+     * Intercept React Native's Alert.alert API
+     */
+    private interceptAlertAPI(): void {
+        const self = this;
+        Alert.alert = function(
+            title: string,
+            message?: string,
+            buttons?: AlertButton[],
+            options?: AlertOptions
+        ): void {
+            if (self.isIntercepting) {
+                const dialogId = generateId();
+                const dialogEvent: DialogEvent = {
+                    dialogId,
+                    dialogTitle: title,
+                    dialogType: 'alert',
+                    timestamp: Date.now(),
+                    buttons: buttons || []
+                };
+
+                self.activeDialogs.set(dialogId, dialogEvent);
+                self.emitEvent(dialogEvent);
+
+                // Create wrapped buttons that log events
+                const wrappedButtons = buttons?.map((button, index) => ({
+                    ...button,
+                    onPress: () => {
+                        const buttonClickEvent: DialogButtonClickEvent = {
+                            dialogId,
+                            buttonText: button.text || '',
+                            buttonIndex: index,
+                            timestamp: Date.now()
+                        };
+                        self.emitEvent(buttonClickEvent);
+                        self.activeDialogs.delete(dialogId);
+                        
+                        // Call original onPress if it exists
+                        if (button.onPress) {
+                            button.onPress();
+                        }
+                    }
+                }));
+
+                // Call original Alert.alert with wrapped buttons
+                self.originalAlert.call(Alert, title, message, wrappedButtons, options);
+            } else {
+                // Call original Alert.alert without interception
+                self.originalAlert.call(Alert, title, message, buttons, options);
+            }
+        };
+    }
+
+    /**
+     * Manually track custom dialog show event
+     */
+    trackCustomDialogShow(dialogId: string, title: string, buttons?: AlertButton[]): void {
+        if (!this.isIntercepting) return;
+
+        const dialogEvent: DialogEvent = {
+            dialogId,
+            dialogTitle: title,
+            dialogType: 'custom',
+            timestamp: Date.now(),
+            buttons: buttons || []
+        };
+
+        this.activeDialogs.set(dialogId, dialogEvent);
+        this.emitEvent(dialogEvent);
+    }
+
+    /**
+     * Manually track custom dialog dismiss event
+     */
+    trackCustomDialogDismiss(dialogId: string, reason: string = 'manual'): void {
+        if (!this.isIntercepting) return;
+
+        const dialogEvent = this.activeDialogs.get(dialogId);
+        if (dialogEvent) {
+            this.activeDialogs.delete(dialogId);
+            // Emit proper dismiss event
+            const dismissEvent: DialogDismissEvent = {
+                dialogId,
+                dialogTitle: dialogEvent.dialogTitle,
+                dialogType: dialogEvent.dialogType,
+                dismissReason: reason,
+                timestamp: Date.now()
+            };
+            this.emitEvent(dismissEvent);
+            
+            // Log the dismiss reason for debugging
+            console.log(`Dialog ${dialogId} dismissed with reason: ${reason}`);
+        }
+    }
+
+    /**
+     * Manually track custom dialog button click event
+     */
+    trackCustomDialogButtonClick(dialogId: string, buttonText: string, buttonIndex: number): void {
+        if (!this.isIntercepting) return;
+
+        const buttonClickEvent: DialogButtonClickEvent = {
+            dialogId,
+            buttonText,
+            buttonIndex,
+            timestamp: Date.now()
+        };
+
+        this.emitEvent(buttonClickEvent);
+    }
+
+    /**
+     * Get currently active dialogs
+     */
+    getActiveDialogs(): DialogEvent[] {
+        return Array.from(this.activeDialogs.values());
+    }
+
+    /**
+     * Clear all active dialogs
+     */
+    clearActiveDialogs(): void {
+        this.activeDialogs.clear();
+    }
+
+    /**
+     * Emit event to all registered callbacks
+     */
+    private emitEvent(event: DialogEvent | DialogButtonClickEvent | DialogDismissEvent): void {
+        this.eventCallbacks.forEach(callback => {
+            try {
+                callback(event);
+            } catch (error) {
+                console.error('DialogListener: Error in event callback:', error);
+            }
+        });
+    }
+
+    /**
+     * Restore original Alert.alert API
+     */
+    restoreOriginalAlert(): void {
+        Alert.alert = this.originalAlert;
+    }
+}
+
+export default DialogListener; 

package/src/utils/useDialogTracking.ts

@@ -0,0 +1,102 @@
+/********************************************************************************************
+* Copyright (C) 2025 Acoustic, L.P. All rights reserved.
+*
+* NOTICE: This file contains material that is confidential and proprietary to
+* Acoustic, L.P. and/or other developers. No license is granted under any intellectual or
+* industrial property rights of Acoustic, L.P. except as may be provided in an agreement with
+* Acoustic, L.P. Any unauthorized copying or distribution of content from this file is
+* prohibited.
+********************************************************************************************/
+
+import { useCallback, useRef } from 'react';
+import type { AlertButton } from 'react-native';
+import DialogListener from './DialogListener';
+import TLTRN from '../TLTRN';
+
+/**
+ * React hook for tracking custom dialog events
+ * Provides utilities to track dialog show, dismiss, and button click events
+ */
+export const useDialogTracking = () => {
+    const dialogIds = useRef<Set<string>>(new Set());
+
+    /**
+     * Generate a unique dialog ID
+     */
+    const generateDialogId = useCallback((): string => {
+        const id = Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
+        dialogIds.current.add(id);
+        return id;
+    }, []);
+
+    /**
+     * Track a custom dialog show event
+     */
+    const trackDialogShow = useCallback((dialogId: string, title: string, buttons?: AlertButton[]) => {
+        DialogListener.getInstance().trackCustomDialogShow(dialogId, title, buttons);
+        // Note: The actual native call is handled by the DialogListener event system
+        // No need to call TLTRN.logDialogShowEvent directly here
+    }, []);
+
+    /**
+     * Track a custom dialog dismiss event
+     */
+    const trackDialogDismiss = useCallback((dialogId: string, reason: string = 'manual') => {
+        DialogListener.getInstance().trackCustomDialogDismiss(dialogId, reason);
+        // Note: The actual native call is handled by the DialogListener event system
+        // No need to call TLTRN.logDialogDismissEvent directly here
+    }, []);
+
+    /**
+     * Track a custom dialog button click event
+     */
+    const trackDialogButtonClick = useCallback((dialogId: string, buttonText: string, buttonIndex: number) => {
+        DialogListener.getInstance().trackCustomDialogButtonClick(dialogId, buttonText, buttonIndex);
+        // Note: The actual native call is handled by the DialogListener event system
+        // No need to call TLTRN.logDialogButtonClickEvent directly here
+    }, []);
+
+    /**
+     * Track a custom dialog event
+     */
+    const trackDialogCustomEvent = useCallback((dialogId: string, eventName: string, values: Record<string, string | number | boolean>) => {
+        TLTRN.logDialogCustomEvent(dialogId, eventName, values);
+    }, []);
+
+    /**
+     * Create a wrapped button with automatic tracking
+     */
+    const createTrackedButton = useCallback((dialogId: string, button: AlertButton, buttonIndex: number): AlertButton => {
+        return {
+            ...button,
+            onPress: () => {
+                // Track the button click
+                trackDialogButtonClick(dialogId, button.text || '', buttonIndex);
+                
+                // Call the original onPress if it exists
+                if (button.onPress) {
+                    button.onPress();
+                }
+            }
+        };
+    }, [trackDialogButtonClick]);
+
+    /**
+     * Clean up dialog tracking
+     */
+    const cleanup = useCallback(() => {
+        dialogIds.current.clear();
+    }, []);
+
+    return {
+        generateDialogId,
+        trackDialogShow,
+        trackDialogDismiss,
+        trackDialogButtonClick,
+        trackDialogCustomEvent,
+        createTrackedButton,
+        cleanup
+    };
+};
+
+export default useDialogTracking; 

package/src/utils/withAcousticAutoDialog.tsx

@@ -0,0 +1,312 @@
+/********************************************************************************************
+* Copyright (C) 2025 Acoustic, L.P. All rights reserved.
+*
+* NOTICE: This file contains material that is confidential and proprietary to
+* Acoustic, L.P. and/or other developers. No license is granted under any intellectual or
+* industrial property rights of Acoustic, L.P. except as may be provided in an agreement with
+* Acoustic, L.P. Any unauthorized copying or distribution of content from this file is
+* prohibited.
+* 
+* Created by Omar Hernandez on 5/9/25.
+* 
+********************************************************************************************/
+
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useCallback } from 'react';
+import { Alert } from 'react-native';
+import { useDialogTracking } from './useDialogTracking';
+import AcousticConnectRN from '../index';
+
+/**
+ * HOC Wrapper that automatically tracks dialog show/dismiss events and button clicks
+ * Works with any dialog component that has 'visible' and 'onDismiss' props
+ * 
+ * Supported Dialog Patterns:
+ * - react-native-paper Dialog components
+ * - Custom modal components with visible/onDismiss props
+ * - Components with different prop names (show/hide, open/close, etc.)
+ * - Components with custom button implementations
+ * - Components with nested dialog structures
+ */
+export function withAcousticAutoDialog(
+  DialogComponent: React.ComponentType<any>
+): React.ComponentType<any> {
+  return forwardRef<any, any>((props, ref) => {
+    const { generateDialogId } = useDialogTracking();
+    const dialogIdRef = useRef<string | null>(null);
+    const isVisibleRef = useRef(false);
+
+    // Track button click event
+    const trackButtonClick = useCallback((buttonText: string, buttonIndex: number) => {
+      if (dialogIdRef.current) {
+        AcousticConnectRN.logDialogButtonClickEvent(dialogIdRef.current, buttonText, buttonIndex);
+        console.log(`🔍 withAcousticAutoDialog: Button clicked - ${buttonText} (${dialogIdRef.current})`);
+      }
+    }, []);
+
+    // Wrap button onPress handlers to track clicks
+    const wrapButtonOnPress = useCallback((originalOnPress: (() => void) | undefined, buttonText: string, buttonIndex: number) => {
+      return () => {
+        trackButtonClick(buttonText, buttonIndex);
+        if (originalOnPress) {
+          originalOnPress();
+        }
+      };
+    }, [trackButtonClick]);
+
+    // Recursively wrap buttons in children
+    const wrapButtonsInChildren = useCallback((children: any, buttonIndex: number = 0): any => {
+      if (!children) return children;
+
+      if (Array.isArray(children)) {
+        return children.map((child, index) => wrapButtonsInChildren(child, buttonIndex + index));
+      }
+
+      if (React.isValidElement(children)) {
+        const childProps = children.props as any;
+        
+        // Check if this is a button component (supports various button types)
+        const isButton = 
+          (typeof children.type === 'function' && 
+           ((children.type as any).displayName === 'Button' ||
+            (children.type as any).name === 'Button' ||
+            (children.type as any).displayName === 'DialogAction' ||
+            (children.type as any).name === 'DialogAction' ||
+            (children.type as any).displayName === 'TouchableOpacity' ||
+            (children.type as any).name === 'TouchableOpacity' ||
+            (children.type as any).displayName === 'Pressable' ||
+            (children.type as any).name === 'Pressable')) ||
+          (childProps && (childProps.onPress || childProps.onPressIn || childProps.onPressOut || childProps.onTouchEnd));
+
+        if (isButton && childProps?.onPress) {
+          const buttonText = childProps.children || childProps.title || 'Button';
+          return React.cloneElement(children, {
+            ...childProps,
+            onPress: wrapButtonOnPress(childProps.onPress, buttonText, buttonIndex)
+          } as any);
+        }
+
+        // Recursively wrap buttons in nested children
+        if (childProps?.children) {
+          return React.cloneElement(children, {
+            ...childProps,
+            children: wrapButtonsInChildren(childProps.children, buttonIndex)
+          } as any);
+        }
+      }
+
+      return children;
+    }, [wrapButtonOnPress]);
+
+    // Track dialog show event when visible changes to true
+    // Supports various visibility prop names: visible, show, open, isOpen, isVisible
+    const isVisible = props.visible || props.show || props.open || props.isOpen || props.isVisible;
+    
+    useEffect(() => {
+      if (isVisible && !isVisibleRef.current) {
+        const dialogId = generateDialogId();
+        dialogIdRef.current = dialogId;
+        isVisibleRef.current = true;
+
+                // Get dialog title from various possible sources
+        const getDialogTitle = (): string => {
+          // Try to get title from props (supports various prop names)
+          if (props.title) return props.title;
+          if (props.dialogTitle) return props.dialogTitle;
+          if (props.header) return props.header;
+          if (props.heading) return props.heading;
+          if (props.name) return props.name;
+          
+                  // Try to get title from children (for react-native-paper Dialog)
+        if (props.children) {
+          console.log(`🔍 withAcousticAutoDialog: Starting title extraction from children`);
+          console.log(`🔍 withAcousticAutoDialog: Initial children:`, props.children);
+          
+          const extractTitleFromChildren = (children: any, depth: number = 0): string | null => {
+              if (!children) return null;
+              
+              if (Array.isArray(children)) {
+                for (const child of children) {
+                  const title = extractTitleFromChildren(child, depth + 1);
+                  if (title) return title;
+                }
+                return null;
+              }
+              
+              if (React.isValidElement(children)) {
+                const childProps = children.props as any;
+                
+                // Debug: Log component info for debugging
+                console.log(`🔍 withAcousticAutoDialog: Processing component at depth ${depth}:`, {
+                  type: children.type,
+                  displayName: (children.type as any)?.displayName,
+                  name: (children.type as any)?.name,
+                  hasChildren: !!childProps?.children,
+                  childrenType: typeof childProps?.children
+                });
+                
+                // Check if this is a Dialog component from react-native-paper
+                if (children.type && 
+                    typeof children.type === 'function' &&
+                    ((children.type as any).displayName === 'Dialog' ||
+                     (children.type as any).name === 'Dialog')) {
+                  console.log(`🔍 withAcousticAutoDialog: Found Dialog component at depth ${depth}`);
+                  // Extract title from Dialog children
+                  if (childProps?.children) {
+                    return extractTitleFromChildren(childProps.children, depth + 1);
+                  }
+                }
+                
+                // Check if this is a Portal component (common wrapper for dialogs)
+                if (children.type && 
+                    typeof children.type === 'function' &&
+                    ((children.type as any).displayName === 'Portal' ||
+                     (children.type as any).name === 'Portal')) {
+                  console.log(`🔍 withAcousticAutoDialog: Found Portal component at depth ${depth}`);
+                  // Extract title from Portal children
+                  if (childProps?.children) {
+                    return extractTitleFromChildren(childProps.children, depth + 1);
+                  }
+                }
+                
+                // Check if this is a DialogTitle component (supports various title component types)
+                if (children.type && 
+                    typeof children.type === 'function' &&
+                    ((children.type as any).displayName === 'DialogTitle' ||
+                     (children.type as any).name === 'DialogTitle' ||
+                     (children.type as any).displayName === 'Title' ||
+                     (children.type as any).name === 'Title' ||
+                     (children.type as any).displayName === 'Header' ||
+                     (children.type as any).name === 'Header' ||
+                     (children.type as any).displayName === 'Heading' ||
+                     (children.type as any).name === 'Heading')) {
+                  if (childProps?.children && typeof childProps.children === 'string') {
+                    console.log(`🔍 withAcousticAutoDialog: Found title in title component: "${childProps.children}"`);
+                    return childProps.children;
+                  }
+                }
+                
+                // Check if this component has title content
+                if (childProps?.title) {
+                  return childProps.title;
+                }
+                
+                // Recursively search in nested children
+                if (childProps?.children) {
+                  return extractTitleFromChildren(childProps.children, depth + 1);
+                }
+              }
+              
+              return null;
+            };
+            
+            const title = extractTitleFromChildren(props.children);
+            if (title) {
+              console.log(`🔍 withAcousticAutoDialog: Found title from children: "${title}"`);
+              return title;
+            }
+          }
+          
+          return 'Dialog';
+        };
+
+        const title = getDialogTitle();
+        
+        // Log dialog show event
+        AcousticConnectRN.logDialogShowEvent(dialogId, title, 'custom');
+        console.log(`🔍 withAcousticAutoDialog: Dialog shown - ${title} (${dialogId})`);
+      } else if (!isVisible && isVisibleRef.current) {
+        // Track dialog dismiss event when visible changes to false
+        if (dialogIdRef.current) {
+          AcousticConnectRN.logDialogDismissEvent(dialogIdRef.current, 'user_action');
+          console.log(`🔍 withAcousticAutoDialog: Dialog dismissed - ${dialogIdRef.current}`);
+          dialogIdRef.current = null;
+        }
+        isVisibleRef.current = false;
+      }
+    }, [isVisible, generateDialogId]);
+
+    // Handle dismiss events (supports various dismiss prop names)
+    const handleDismiss = () => {
+      if (dialogIdRef.current) {
+        AcousticConnectRN.logDialogDismissEvent(dialogIdRef.current, 'user_action');
+        console.log(`🔍 withAcousticAutoDialog: Dialog dismissed via dismiss handler - ${dialogIdRef.current}`);
+        dialogIdRef.current = null;
+      }
+      isVisibleRef.current = false;
+      
+      // Call original dismiss handler if it exists (supports various prop names)
+      if (props.onDismiss) {
+        props.onDismiss();
+      } else if (props.onClose) {
+        props.onClose();
+      } else if (props.onHide) {
+        props.onHide();
+      } else if (props.close) {
+        props.close();
+      } else if (props.hide) {
+        props.hide();
+      }
+    };
+
+    // Forward ref to the wrapped component
+    useImperativeHandle(ref, () => {
+      return {
+        ...ref,
+        // Add any additional methods if needed
+      };
+    }, [ref]);
+
+    // Wrap buttons in children to track clicks
+    const wrappedChildren = wrapButtonsInChildren(props.children);
+
+    // Determine which dismiss prop to use based on what the original component expects
+    const dismissProps: any = {};
+    if (props.onDismiss) {
+      dismissProps.onDismiss = handleDismiss;
+    } else if (props.onClose) {
+      dismissProps.onClose = handleDismiss;
+    } else if (props.onHide) {
+      dismissProps.onHide = handleDismiss;
+    } else if (props.close) {
+      dismissProps.close = handleDismiss;
+    } else if (props.hide) {
+      dismissProps.hide = handleDismiss;
+    } else {
+      // Default to onDismiss if no dismiss prop is found
+      dismissProps.onDismiss = handleDismiss;
+    }
+
+    return (
+      <DialogComponent
+        {...props}
+        {...dismissProps}
+        ref={ref}
+        children={wrappedChildren}
+      />
+    );
+  });
+}
+
+/**
+ * Convenience function to create tracked versions of common dialog components
+ */
+export function createTrackedDialogComponents() {
+  // Note: These would need to be imported in the consuming app
+  // This is just a template for how to use the HOC
+  
+  return {
+    // Example usage (uncomment when react-native-paper is available):
+    // TrackedDialog: withAcousticAutoDialog(require('react-native-paper').Dialog),
+    // TrackedPortal: withAcousticAutoDialog(require('react-native-paper').Portal),
+  };
+}
+
+/**
+ * Hook to get tracked dialog components
+ */
+export function useTrackedDialogs() {
+  return {
+    withAcousticAutoDialog,
+    createTrackedDialogComponents,
+  };
+}