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

package/src/examples/HOCDialogExample.tsx

@@ -0,0 +1,253 @@
+/********************************************************************************************
+* 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 * as React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import Connect from '../components/Connect';
+
+/**
+ * Example demonstrating HOC-based Paper Dialog tracking
+ * 
+ * This approach requires minimal code changes:
+ * 1. Create tracked versions of your dialog components
+ * 2. Use the tracked versions instead of the original ones
+ * 3. All dialog events are automatically tracked!
+ */
+const HOCDialogExample: React.FC = () => {
+  const [dialogVisible, setDialogVisible] = React.useState(false);
+
+  // Example 1: React Native Alert.alert (automatically tracked)
+  const showAlertDialog = () => {
+    Alert.alert(
+      'Confirmation Alert',
+      'This is a native alert dialog that is automatically tracked.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'OK', onPress: () => console.log('Alert OK pressed') }
+      ]
+    );
+  };
+
+  // Example 2: Paper Dialog with HOC tracking
+  const showPaperDialog = () => {
+    setDialogVisible(true);
+  };
+
+  const hidePaperDialog = () => {
+    setDialogVisible(false);
+  };
+
+  return (
+    <Connect captureDialogEvents={true} captureKeyboardEvents={false}>
+      <View style={styles.container}>
+        <Text style={styles.title}>HOC Dialog Tracking Example</Text>
+        <Text style={styles.subtitle}>
+          Minimal code changes required - just wrap your dialog components!
+        </Text>
+
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity style={styles.button} onPress={showAlertDialog}>
+            <Text style={styles.buttonText}>Show Alert.alert</Text>
+            <Text style={styles.buttonSubtext}>Automatically tracked</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.button} onPress={showPaperDialog}>
+            <Text style={styles.buttonText}>Show Paper Dialog (HOC)</Text>
+            <Text style={styles.buttonSubtext}>Minimal code changes</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.infoContainer}>
+          <Text style={styles.infoTitle}>How to use HOC approach:</Text>
+          <Text style={styles.infoText}>1. Create tracked dialog components</Text>
+          <Text style={styles.infoText}>2. Use tracked versions instead of originals</Text>
+          <Text style={styles.infoText}>3. All events automatically tracked!</Text>
+          <Text style={styles.infoText}>4. No manual tracking code needed</Text>
+        </View>
+
+        <View style={styles.codeContainer}>
+          <Text style={styles.codeTitle}>Example Setup Code:</Text>
+          <Text style={styles.codeText}>
+            {`// In your app setup
+import { withAcousticAutoDialog } from 'react-native-acoustic-connect-beta';
+import { Dialog, Portal } from 'react-native-paper';
+
+// Create tracked versions
+const TrackedDialog = withAcousticAutoDialog(Dialog);
+const TrackedPortal = withAcousticAutoDialog(Portal);
+
+// Use TrackedDialog instead of Dialog - that's it!`}
+          </Text>
+        </View>
+
+        {/* Example of how the tracked dialog would be used */}
+        {dialogVisible && (
+          <View style={styles.exampleDialog}>
+            <Text style={styles.dialogTitle}>Example Dialog</Text>
+            <Text style={styles.dialogContent}>
+              This shows how you would use the tracked dialog components.
+              In a real app, you would use TrackedDialog instead of Dialog.
+            </Text>
+            <View style={styles.dialogActions}>
+              <TouchableOpacity style={styles.dialogButton} onPress={hidePaperDialog}>
+                <Text style={styles.dialogButtonText}>Cancel</Text>
+              </TouchableOpacity>
+              <TouchableOpacity 
+                style={[styles.dialogButton, styles.primaryButton]} 
+                onPress={() => {
+                  console.log('Dialog confirmed!');
+                  hidePaperDialog();
+                }}
+              >
+                <Text style={styles.dialogButtonText}>Confirm</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+      </View>
+    </Connect>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 10,
+    color: '#333',
+  },
+  subtitle: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 30,
+    color: '#666',
+    fontStyle: 'italic',
+  },
+  buttonContainer: {
+    gap: 15,
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    padding: 15,
+    borderRadius: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  buttonSubtext: {
+    color: 'rgba(255, 255, 255, 0.8)',
+    fontSize: 12,
+    textAlign: 'center',
+    marginTop: 2,
+  },
+  infoContainer: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    marginTop: 30,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  infoTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 10,
+    color: '#333',
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 5,
+  },
+  codeContainer: {
+    backgroundColor: '#f8f9fa',
+    padding: 15,
+    borderRadius: 8,
+    marginTop: 20,
+    borderLeftWidth: 4,
+    borderLeftColor: '#007AFF',
+  },
+  codeTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 10,
+    color: '#333',
+  },
+  codeText: {
+    fontSize: 12,
+    color: '#555',
+    fontFamily: 'monospace',
+    lineHeight: 18,
+  },
+  exampleDialog: {
+    position: 'absolute',
+    top: '50%',
+    left: 20,
+    right: 20,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  dialogTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 15,
+    color: '#333',
+  },
+  dialogContent: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20,
+    lineHeight: 22,
+  },
+  dialogActions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 10,
+  },
+  dialogButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 6,
+    backgroundColor: '#f0f0f0',
+  },
+  primaryButton: {
+    backgroundColor: '#007AFF',
+  },
+  dialogButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+});
+
+export default HOCDialogExample; 

package/src/index.ts

@@ -15,9 +15,13 @@ import { NitroModules } from 'react-native-nitro-modules'
 import type { AcousticConnectRN as AcousticConnectRNSpec } from './specs/react-native-acoustic-connect.nitro'
 import Connect from './components/Connect'
 import KeyboardListener from './utils/KeyboardListener'
+import DialogListener from './utils/DialogListener'
+import useDialogTracking from './utils/useDialogTracking'
+import { withAcousticAutoDialog } from './utils/withAcousticAutoDialog'
+import DialogDebugger from './utils/DialogDebugger'
 import TLTRN from './TLTRN'
 
 const AcousticConnectRN = NitroModules.createHybridObject<AcousticConnectRNSpec>('AcousticConnectRN')
 
-export { Connect, TLTRN, KeyboardListener} 
+export { Connect, TLTRN, KeyboardListener, DialogListener, useDialogTracking, DialogDebugger, withAcousticAutoDialog }
 export default AcousticConnectRN

package/src/specs/react-native-acoustic-connect.nitro.ts

@@ -39,4 +39,9 @@ export interface AcousticConnectRN extends HybridObject<{ ios: 'swift', android:
     logScreenViewContextLoad(logicalPageName: string | null | undefined, referrer:string | null | undefined): boolean
     logScreenViewContextUnload(logicalPageName: string | null | undefined, referrer:string | null | undefined): boolean
     logScreenLayout(name: string, delay: number): boolean
+    // New dialog event handling methods
+    logDialogShowEvent(dialogId: string, dialogTitle: string, dialogType: string): boolean
+    logDialogDismissEvent(dialogId: string, dismissReason: string): boolean
+    logDialogButtonClickEvent(dialogId: string, buttonText: string, buttonIndex: number): boolean
+    logDialogCustomEvent(dialogId: string, eventName: string, values: Record<string, string | number | boolean>): boolean
 }

package/src/utils/DialogDebugger.ts

@@ -0,0 +1,224 @@
+/********************************************************************************************
+* 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 } from 'react-native';
+import DialogListener from './DialogListener';
+import TLTRN from '../TLTRN';
+
+/**
+ * Debug utility for dialog event tracking
+ * Helps identify issues with dialog event interception and logging
+ */
+export class DialogDebugger {
+    private static instance: DialogDebugger;
+    private isEnabled: boolean = false;
+    private originalAlert: typeof Alert.alert;
+
+    private constructor() {
+        this.originalAlert = Alert.alert;
+    }
+
+    static getInstance(): DialogDebugger {
+        if (!DialogDebugger.instance) {
+            DialogDebugger.instance = new DialogDebugger();
+        }
+        return DialogDebugger.instance;
+    }
+
+    /**
+     * Enable debug mode
+     */
+    enable(): void {
+        this.isEnabled = true;
+        console.log('🔍 DialogDebugger: Debug mode enabled');
+    }
+
+    /**
+     * Disable debug mode
+     */
+    disable(): void {
+        this.isEnabled = false;
+        console.log('🔍 DialogDebugger: Debug mode disabled');
+    }
+
+    /**
+     * Test the complete dialog event flow
+     */
+    testDialogEventFlow(): void {
+        console.log('🔍 DialogDebugger: Testing dialog event flow...');
+        
+        // Test 1: Check if DialogListener is working
+        this.testDialogListener();
+        
+        // Test 2: Check if TLTRN methods are accessible
+        this.testTLTRNMethods();
+        
+        // Test 3: Check if Alert.alert override is working
+        this.testAlertOverride();
+        
+        // Test 4: Test native method calls
+        this.testNativeMethods();
+    }
+
+    /**
+     * Test DialogListener functionality
+     */
+    private testDialogListener(): void {
+        console.log('🔍 DialogDebugger: Testing DialogListener...');
+        
+        try {
+            const dialogListener = DialogListener.getInstance();
+            console.log('✅ DialogListener.getInstance() - SUCCESS');
+            
+            // Test event listener
+            const unsubscribe = dialogListener.addEventListener((event) => {
+                console.log('🔍 DialogDebugger: DialogListener event received:', event);
+            });
+            console.log('✅ DialogListener.addEventListener() - SUCCESS');
+            
+            // Test manual tracking
+            dialogListener.trackCustomDialogShow('test-dialog-id', 'Test Dialog', []);
+            console.log('✅ DialogListener.trackCustomDialogShow() - SUCCESS');
+            
+            unsubscribe();
+        } catch (error) {
+            console.error('❌ DialogDebugger: DialogListener test failed:', error);
+        }
+    }
+
+    /**
+     * Test TLTRN methods
+     */
+    private testTLTRNMethods(): void {
+        console.log('🔍 DialogDebugger: Testing TLTRN methods...');
+        
+        try {
+            // Test if TLTRN methods exist
+            if (typeof TLTRN.logDialogShowEvent === 'function') {
+                console.log('✅ TLTRN.logDialogShowEvent - EXISTS');
+            } else {
+                console.error('❌ TLTRN.logDialogShowEvent - NOT FOUND');
+            }
+            
+            if (typeof TLTRN.interceptDialogEvents === 'function') {
+                console.log('✅ TLTRN.interceptDialogEvents - EXISTS');
+            } else {
+                console.error('❌ TLTRN.interceptDialogEvents - NOT FOUND');
+            }
+            
+            // Test method call
+            TLTRN.logDialogShowEvent('test-dialog-id', 'Test Dialog', 'test');
+            console.log('✅ TLTRN.logDialogShowEvent() - CALLED');
+            
+        } catch (error) {
+            console.error('❌ DialogDebugger: TLTRN test failed:', error);
+        }
+    }
+
+    /**
+     * Test Alert.alert override
+     */
+    private testAlertOverride(): void {
+        console.log('🔍 DialogDebugger: Testing Alert.alert override...');
+        
+        try {
+            // Check if Alert.alert is overridden
+            if (Alert.alert !== this.originalAlert) {
+                console.log('✅ Alert.alert is overridden');
+            } else {
+                console.error('❌ Alert.alert is NOT overridden');
+            }
+            
+            // Test Alert.alert call
+            Alert.alert('Debug Test', 'This is a test alert', [
+                { text: 'OK', onPress: () => console.log('🔍 DialogDebugger: Alert OK pressed') }
+            ]);
+            console.log('✅ Alert.alert() - CALLED');
+            
+        } catch (error) {
+            console.error('❌ DialogDebugger: Alert.alert test failed:', error);
+        }
+    }
+
+    /**
+     * Test native method calls
+     */
+    private testNativeMethods(): void {
+        console.log('🔍 DialogDebugger: Testing native method calls...');
+        
+        try {
+            // Import AcousticConnectRN to test native calls
+            const AcousticConnectRN = require('../index').default;
+            
+            if (AcousticConnectRN && typeof AcousticConnectRN.logDialogShowEvent === 'function') {
+                console.log('✅ AcousticConnectRN.logDialogShowEvent - EXISTS');
+                
+                // Test native call
+                const result = AcousticConnectRN.logDialogShowEvent('test-dialog-id', 'Test Dialog', 'test');
+                console.log('✅ AcousticConnectRN.logDialogShowEvent() - CALLED, result:', result);
+            } else {
+                console.error('❌ AcousticConnectRN.logDialogShowEvent - NOT FOUND');
+            }
+            
+        } catch (error) {
+            console.error('❌ DialogDebugger: Native method test failed:', error);
+        }
+    }
+
+    /**
+     * Check if dialog tracking is properly enabled
+     */
+    checkDialogTrackingStatus(): void {
+        console.log('🔍 DialogDebugger: Checking dialog tracking status...');
+        
+        // Check DialogListener status
+        const dialogListener = DialogListener.getInstance();
+        console.log('DialogListener status:', {
+            isIntercepting: (dialogListener as any).isIntercepting,
+            eventCallbacksCount: (dialogListener as any).eventCallbacks?.length || 0
+        });
+        
+        // Check if Alert.alert is overridden
+        console.log('Alert.alert override status:', {
+            isOverridden: Alert.alert !== this.originalAlert,
+            originalAlert: this.originalAlert,
+            currentAlert: Alert.alert
+        });
+        
+        // Check TLTRN methods
+        console.log('TLTRN methods status:', {
+            logDialogShowEvent: typeof TLTRN.logDialogShowEvent,
+            interceptDialogEvents: typeof TLTRN.interceptDialogEvents
+        });
+    }
+
+    /**
+     * Force enable dialog tracking for testing
+     */
+    forceEnableDialogTracking(): void {
+        console.log('🔍 DialogDebugger: Force enabling dialog tracking...');
+        
+        try {
+            // Force enable DialogListener
+            const dialogListener = DialogListener.getInstance();
+            (dialogListener as any).isIntercepting = true;
+            console.log('✅ DialogListener interception forced enabled');
+            
+            // Force enable TLTRN dialog events
+            TLTRN.interceptDialogEvents(true);
+            console.log('✅ TLTRN dialog events forced enabled');
+            
+        } catch (error) {
+            console.error('❌ DialogDebugger: Force enable failed:', error);
+        }
+    }
+}
+
+export default DialogDebugger;