react-native-acoustic-connect-beta 19.0.25 → 19.0.27

package/Examples/SampleUI/src/Examples/DataTableExample.tsx

@@ -1,128 +0,0 @@
-import * as React from 'react';
-import { StyleSheet } from 'react-native';
-
-import { DataTable, Card } from 'react-native-paper';
-
-import ScreenWrapper from '../ScreenWrapper';
-
-type ItemsState = Array<{
-  key: number;
-  name: string;
-  calories: number;
-  fat: number;
-}>;
-
-const DataTableExample = () => {
-  const [sortAscending, setSortAscending] = React.useState<boolean>(true);
-  const [page, setPage] = React.useState<number>(0);
-  const [items] = React.useState<ItemsState>([
-    {
-      key: 1,
-      name: 'Cupcake',
-      calories: 356,
-      fat: 16,
-    },
-    {
-      key: 2,
-      name: 'Eclair',
-      calories: 262,
-      fat: 16,
-    },
-    {
-      key: 3,
-      name: 'Frozen yogurt',
-      calories: 159,
-      fat: 6,
-    },
-    {
-      key: 4,
-      name: 'Gingerbread',
-      calories: 305,
-      fat: 3.7,
-    },
-    {
-      key: 5,
-      name: 'Ice cream sandwich',
-      calories: 237,
-      fat: 9,
-    },
-    {
-      key: 6,
-      name: 'Jelly Bean',
-      calories: 375,
-      fat: 0,
-    },
-  ]);
-  const [numberOfItemsPerPageList] = React.useState([2, 3, 4, 200]);
-  const [itemsPerPage, onItemsPerPageChange] = React.useState(
-    numberOfItemsPerPageList[0]
-  );
-  const sortedItems = items
-    .slice()
-    .sort((item1, item2) =>
-      sortAscending
-        ? item1.name.localeCompare(item2.name)
-        : item2.name.localeCompare(item1.name)
-    );
-  const from = page * itemsPerPage;
-  const to = Math.min((page + 1) * itemsPerPage, items.length);
-
-  React.useEffect(() => {
-    setPage(0);
-  }, [itemsPerPage]);
-
-  return (
-    <ScreenWrapper contentContainerStyle={styles.content}>
-      <Card>
-        <DataTable>
-          <DataTable.Header>
-            <DataTable.Title
-              sortDirection={sortAscending ? 'ascending' : 'descending'}
-              onPress={() => setSortAscending(!sortAscending)}
-              style={styles.first}
-            >
-              Dessert
-            </DataTable.Title>
-            <DataTable.Title numberOfLines={2} numeric>
-              Calories per piece
-            </DataTable.Title>
-            <DataTable.Title numeric>Fat (g)</DataTable.Title>
-          </DataTable.Header>
-
-          {sortedItems.slice(from, to).map((item) => (
-            <DataTable.Row key={item.key}>
-              <DataTable.Cell style={styles.first}>{item.name}</DataTable.Cell>
-              <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
-              <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
-            </DataTable.Row>
-          ))}
-
-          <DataTable.Pagination
-            page={page}
-            numberOfPages={Math.ceil(sortedItems.length / itemsPerPage)}
-            onPageChange={(page) => setPage(page)}
-            label={`${from + 1}-${to} of ${sortedItems.length}`}
-            numberOfItemsPerPageList={numberOfItemsPerPageList}
-            numberOfItemsPerPage={itemsPerPage}
-            onItemsPerPageChange={onItemsPerPageChange}
-            showFastPaginationControls
-            selectPageDropdownLabel={'Rows per page'}
-          />
-        </DataTable>
-      </Card>
-    </ScreenWrapper>
-  );
-};
-
-DataTableExample.title = 'Data Table';
-
-const styles = StyleSheet.create({
-  content: {
-    padding: 8,
-  },
-  first: {
-    flex: 2,
-  },
-});
-
-export default DataTableExample;

package/Examples/SampleUI/src/Examples/DialogExample.tsx

@@ -1,217 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet, Alert } from 'react-native';
-
-import { Button } from 'react-native-paper';
-
-import {
-  DialogWithCustomColors,
-  DialogWithDismissableBackButton,
-  DialogWithIcon,
-  DialogWithLoadingIndicator,
-  DialogWithLongText,
-  DialogWithRadioBtns,
-  UndismissableDialog,
-  DialogTrackingTest,
-} from './Dialogs';
-import { useExampleTheme } from '..';
-import ScreenWrapper from '../ScreenWrapper';
-import { useDialogTracking } from 'react-native-acoustic-connect-beta';
-
-type ButtonVisibility = {
-  [key: string]: boolean | undefined;
-};
-
-const DialogExample = () => {
-  const [visible, setVisible] = React.useState<ButtonVisibility>({});
-  const { isV3 } = useExampleTheme();
-  
-  // Add dialog tracking
-  const { generateDialogId, trackDialogShow, trackDialogDismiss } = useDialogTracking();
-  const [dialogIds, setDialogIds] = React.useState<Record<string, string>>({});
-
-  const _toggleDialog = (name: string) => () => {
-    const isCurrentlyVisible = !!visible[name];
-    
-    if (!isCurrentlyVisible) {
-      // Dialog is being shown - track it
-      const dialogId = generateDialogId();
-      setDialogIds(prev => ({ ...prev, [name]: dialogId }));
-      
-      // Get dialog title based on the dialog type
-      const getDialogTitle = (dialogName: string): string => {
-        switch (dialogName) {
-          case 'dialog1': return 'Long Text Dialog';
-          case 'dialog2': return 'Radio Buttons Dialog';
-          case 'dialog3': return 'Progress Indicator Dialog';
-          case 'dialog4': return 'Undismissable Dialog';
-          case 'dialog5': return 'Custom Colors Dialog';
-          case 'dialog6': return 'Dialog with Icon';
-          case 'dialog7': return 'Dismissable Back Button Dialog';
-          case 'dialogTracking': return 'Dialog Tracking Test';
-          default: return 'Dialog';
-        }
-      };
-      
-      const title = getDialogTitle(name);
-      trackDialogShow(dialogId, title, []);
-      
-      console.log(`🔍 DialogExample: Showing dialog - ${title} (${dialogId})`);
-    } else {
-      // Dialog is being hidden - track dismiss
-      const dialogId = dialogIds[name];
-      if (dialogId) {
-        trackDialogDismiss(dialogId, 'user_action');
-        console.log(`🔍 DialogExample: Dismissing dialog - ${dialogIds[name]} (${dialogId})`);
-        setDialogIds(prev => {
-          const newIds = { ...prev };
-          delete newIds[name];
-          return newIds;
-        });
-      }
-    }
-    
-    setVisible({ ...visible, [name]: !visible[name] });
-  };
-
-  const _getVisible = (name: string) => !!visible[name];
-
-  return (
-    <ScreenWrapper style={styles.container}>
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialog1')}
-        style={styles.button}
-        testID="dialog-long-text-button"
-      >
-        Long text
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialog2')}
-        style={styles.button}
-        testID="dialog-radio-buttons-button"
-      >
-        Radio buttons
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialog3')}
-        style={styles.button}
-        testID="dialog-progress-indicator-button"
-      >
-        Progress indicator
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialog4')}
-        style={styles.button}
-        testID="dialog-undismissable-button"
-      >
-        Undismissable Dialog
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialog5')}
-        style={styles.button}
-        testID="dialog-custom-colors-button"
-      >
-        Custom colors
-      </Button>
-      {isV3 && (
-        <Button
-          mode="outlined"
-          onPress={_toggleDialog('dialog6')}
-          style={styles.button}
-          testID="dialog-with-icon-button"
-        >
-          With icon
-        </Button>
-      )}
-      {Platform.OS === 'android' && (
-        <Button
-          mode="outlined"
-          onPress={_toggleDialog('dialog7')}
-          style={styles.button}
-          testID="dialog-dismissable-back-button"
-        >
-          Dismissable back button
-        </Button>
-      )}
-      <Button
-        mode="outlined"
-        onPress={_toggleDialog('dialogTracking')}
-        style={styles.button}
-        testID="dialog-tracking-test-button"
-      >
-        Dialog Tracking Test
-      </Button>
-      <Button
-        mode="outlined"
-        onPress={() => {
-          console.log('🧪 Testing Alert.alert tracking...');
-          Alert.alert(
-            'Test Alert',
-            'This is a test alert for dialog tracking',
-            [
-              { text: 'Cancel', style: 'cancel' },
-              { text: 'OK', onPress: () => console.log('✅ OK pressed') }
-            ]
-          );
-        }}
-        style={styles.button}
-        testID="test-alert-button"
-      >
-        Test Alert
-      </Button>
-      <DialogWithLongText
-        visible={_getVisible('dialog1')}
-        close={_toggleDialog('dialog1')}
-      />
-      <DialogWithRadioBtns
-        visible={_getVisible('dialog2')}
-        close={_toggleDialog('dialog2')}
-      />
-      <DialogWithLoadingIndicator
-        visible={_getVisible('dialog3')}
-        close={_toggleDialog('dialog3')}
-      />
-      <UndismissableDialog
-        visible={_getVisible('dialog4')}
-        close={_toggleDialog('dialog4')}
-      />
-      <DialogWithCustomColors
-        visible={_getVisible('dialog5')}
-        close={_toggleDialog('dialog5')}
-      />
-      {isV3 && (
-        <DialogWithIcon
-          visible={_getVisible('dialog6')}
-          close={_toggleDialog('dialog6')}
-        />
-      )}
-      <DialogWithDismissableBackButton
-        visible={_getVisible('dialog7')}
-        close={_toggleDialog('dialog7')}
-      />
-      
-      {/* Dialog Tracking Test Component */}
-      <DialogTrackingTest
-        visible={_getVisible('dialogTracking')}
-        close={_toggleDialog('dialogTracking')}
-      />
-    </ScreenWrapper>
-  );
-};
-
-DialogExample.title = 'Dialog';
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 12,
-  },
-  button: {
-    margin: 4,
-  },
-});
-
-export default DialogExample;

package/Examples/SampleUI/src/Examples/Dialogs/DialogTextComponent.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-
-import {
-  Paragraph,
-  Subheading,
-  Text as NativeText,
-  Text,
-} from 'react-native-paper';
-
-import { useExampleTheme } from '../..';
-
-type Props = React.ComponentProps<typeof NativeText> & {
-  isSubheading?: boolean;
-};
-
-export const TextComponent = ({ isSubheading = false, ...props }: Props) => {
-  const theme = useExampleTheme();
-
-  if (theme.isV3) {
-    return (
-      <Text
-        variant={isSubheading ? 'bodyLarge' : 'bodyMedium'}
-        style={{ color: theme.colors.onSurfaceVariant }}
-        {...props}
-      />
-    );
-  } else if (isSubheading) {
-    return <Subheading {...props} />;
-  }
-  return <Paragraph {...props} />;
-};

package/Examples/SampleUI/src/Examples/Dialogs/DialogTrackingTest.tsx

@@ -1,307 +0,0 @@
-import * as React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Alert, ScrollView } from 'react-native';
-
-interface DialogTrackingTestProps {
-  visible: boolean;
-  close: () => void;
-}
-
-const DialogTrackingTest: React.FC<DialogTrackingTestProps> = ({ visible, close }) => {
-  // Test Alert.alert tracking (this should work automatically)
-  const testAlertTracking = () => {
-    console.log('🧪 Testing Alert.alert tracking...');
-    Alert.alert(
-      'Test Alert',
-      'This is a test alert for dialog tracking',
-      [
-        { text: 'Cancel', style: 'cancel' },
-        { text: 'OK', onPress: () => console.log('✅ OK pressed') }
-      ]
-    );
-  };
-
-  // Test direct native API call
-  const testNativeDialogAPI = async () => {
-    console.log('🧪 Testing direct native dialog API...');
-    try {
-      const AcousticConnectRN = require('react-native-acoustic-connect-beta').default;
-      console.log('🔍 AcousticConnectRN methods available:', Object.keys(AcousticConnectRN));
-      
-      if (typeof AcousticConnectRN.logDialogShowEvent === 'function') {
-        const result = await AcousticConnectRN.logDialogShowEvent('test-dialog', 'Test Dialog', 'test');
-        console.log('Native dialog API result:', result);
-        if (result) {
-          console.log('✅ Native dialog API call successful');
-        } else {
-          console.log('❌ Native dialog API call returned false - method may not be implemented on native side');
-        }
-      } else {
-        console.log('❌ logDialogShowEvent method not found on AcousticConnectRN');
-      }
-    } catch (error) {
-      console.error('❌ Native dialog API error:', error);
-    }
-  };
-
-  // Test TLTRN dialog tracking
-  const testTLTRNDialogTracking = async () => {
-    console.log('🧪 Testing TLTRN dialog tracking...');
-    try {
-      const { TLTRN } = require('react-native-acoustic-connect-beta');
-      console.log('🔍 TLTRN methods available:', Object.keys(TLTRN));
-      
-      if (typeof TLTRN.logDialogShowEvent === 'function') {
-        const result = await TLTRN.logDialogShowEvent('tltrn-test', 'TLTRN Test Dialog', 'test');
-        console.log('TLTRN dialog tracking result:', result);
-        if (result) {
-          console.log('✅ TLTRN dialog tracking successful');
-        } else {
-          console.log('❌ TLTRN dialog tracking returned false - native method may not be implemented');
-        }
-      } else {
-        console.log('❌ TLTRN.logDialogShowEvent method not found');
-      }
-    } catch (error) {
-      console.error('❌ TLTRN dialog tracking error:', error);
-    }
-  };
-
-  // Test DialogListener functionality
-  const testDialogListener = () => {
-    console.log('🧪 Testing DialogListener...');
-    try {
-      const { DialogListener } = require('react-native-acoustic-connect-beta');
-      const dialogListener = DialogListener.getInstance();
-      console.log('✅ DialogListener instance:', dialogListener);
-      console.log('🔍 DialogListener isIntercepting:', (dialogListener as any).isIntercepting);
-      console.log('🔍 DialogListener active dialogs:', dialogListener.getActiveDialogs());
-    } catch (error) {
-      console.error('❌ DialogListener test error:', error);
-    }
-  };
-
-  // Test useDialogTracking hook
-  const testUseDialogTracking = () => {
-    console.log('🧪 Testing useDialogTracking hook...');
-    try {
-      const { useDialogTracking } = require('react-native-acoustic-connect-beta');
-      console.log('✅ useDialogTracking hook available');
-      
-      // Note: This can only be tested within a React component
-      console.log('ℹ️ useDialogTracking hook can only be used within React components');
-    } catch (error) {
-      console.error('❌ useDialogTracking test error:', error);
-    }
-  };
-
-  // Test dialog dismiss event
-  const testDialogDismiss = async () => {
-    console.log('🧪 Testing dialog dismiss event...');
-    try {
-      const { TLTRN } = require('react-native-acoustic-connect-beta');
-      const result = await TLTRN.logDialogDismissEvent('test-dialog', 'user_action');
-      console.log('Dialog dismiss result:', result);
-      if (result) {
-        console.log('✅ Dialog dismiss event successful');
-      } else {
-        console.log('❌ Dialog dismiss event returned false');
-      }
-    } catch (error) {
-      console.error('❌ Dialog dismiss error:', error);
-    }
-  };
-
-  // Test dialog button click event
-  const testDialogButtonClick = async () => {
-    console.log('🧪 Testing dialog button click event...');
-    try {
-      const { TLTRN } = require('react-native-acoustic-connect-beta');
-      const result = await TLTRN.logDialogButtonClickEvent('test-dialog', 'Test Button', 0);
-      console.log('Dialog button click result:', result);
-      if (result) {
-        console.log('✅ Dialog button click event successful');
-      } else {
-        console.log('❌ Dialog button click event returned false');
-      }
-    } catch (error) {
-      console.error('❌ Dialog button click error:', error);
-    }
-  };
-
-  // Test dialog custom event
-  const testDialogCustomEvent = async () => {
-    console.log('🧪 Testing dialog custom event...');
-    try {
-      const { TLTRN } = require('react-native-acoustic-connect-beta');
-      const result = await TLTRN.logDialogCustomEvent('test-dialog', 'custom_action', { action: 'test' });
-      console.log('Dialog custom event result:', result);
-      if (result) {
-        console.log('✅ Dialog custom event successful');
-      } else {
-        console.log('❌ Dialog custom event returned false');
-      }
-    } catch (error) {
-      console.error('❌ Dialog custom event error:', error);
-    }
-  };
-
-  // Test manual dialog tracking
-  const testManualDialogTracking = () => {
-    console.log('🧪 Testing manual dialog tracking...');
-    try {
-      const { useDialogTracking } = require('react-native-acoustic-connect-beta');
-      console.log('✅ Manual dialog tracking available via useDialogTracking hook');
-      console.log('ℹ️ This is the recommended approach for custom dialogs');
-    } catch (error) {
-      console.error('❌ Manual dialog tracking error:', error);
-    }
-  };
-
-  if (!visible) return null;
-
-  return (
-    <View style={styles.overlay}>
-      <View style={styles.container}>
-        <Text style={styles.title}>Dialog Tracking Test</Text>
-        
-        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
-          <TouchableOpacity style={styles.button} onPress={testAlertTracking}>
-            <Text style={styles.buttonText}>✅ Test Alert.alert (Auto)</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testDialogListener}>
-            <Text style={styles.buttonText}>🔍 Test DialogListener</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testUseDialogTracking}>
-            <Text style={styles.buttonText}>🔧 Test useDialogTracking Hook</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testManualDialogTracking}>
-            <Text style={styles.buttonText}>📝 Test Manual Tracking</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testNativeDialogAPI}>
-            <Text style={styles.buttonText}>🔌 Test Native Dialog API</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testTLTRNDialogTracking}>
-            <Text style={styles.buttonText}>🔌 Test TLTRN Dialog Tracking</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testDialogDismiss}>
-            <Text style={styles.buttonText}>🔌 Test Dialog Dismiss</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testDialogButtonClick}>
-            <Text style={styles.buttonText}>🔌 Test Dialog Button Click</Text>
-          </TouchableOpacity>
-          
-          <TouchableOpacity style={styles.button} onPress={testDialogCustomEvent}>
-            <Text style={styles.buttonText}>🔌 Test Dialog Custom Event</Text>
-          </TouchableOpacity>
-        </ScrollView>
-        
-        <TouchableOpacity style={styles.closeButton} onPress={close}>
-          <Text style={styles.closeButtonText}>Close</Text>
-        </TouchableOpacity>
-        
-        <Text style={styles.info}>
-          Check console for tracking logs. Look for 🔍, 🧪, ✅, and ❌ emojis.
-        </Text>
-        
-        <Text style={styles.warning}>
-          ⚠️ Native API tests may fail if methods aren't implemented on native side.
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000,
-  },
-  container: {
-    backgroundColor: 'white',
-    borderRadius: 12,
-    padding: 20,
-    margin: 20,
-    maxWidth: 400,
-    maxHeight: '80%',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 15,
-    textAlign: 'center',
-    color: '#333',
-  },
-  scrollView: {
-    maxHeight: 400,
-  },
-  button: {
-    backgroundColor: '#007AFF',
-    padding: 12,
-    borderRadius: 8,
-    marginBottom: 8,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-    elevation: 3,
-  },
-  buttonText: {
-    color: 'white',
-    textAlign: 'center',
-    fontWeight: '600',
-    fontSize: 14,
-  },
-  closeButton: {
-    backgroundColor: '#FF3B30',
-    padding: 12,
-    borderRadius: 8,
-    marginTop: 10,
-    marginBottom: 10,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-    elevation: 3,
-  },
-  closeButtonText: {
-    color: 'white',
-    textAlign: 'center',
-    fontWeight: '600',
-    fontSize: 14,
-  },
-  info: {
-    fontSize: 12,
-    color: '#666',
-    textAlign: 'center',
-    fontStyle: 'italic',
-    marginTop: 5,
-  },
-  warning: {
-    fontSize: 11,
-    color: '#FF9500',
-    textAlign: 'center',
-    marginTop: 5,
-    fontWeight: '500',
-  },
-});
-
-export default DialogTrackingTest;