Cleanup navigation tracking (#161)

app/src/Navigation.tsx

@@ -39,7 +39,7 @@ import PassportDataInfoScreen from './screens/Settings/PassportDataInfoScreen';
 import ShowRecoveryPhraseScreen from './screens/Settings/ShowRecoveryPhraseScreen';
 import SettingsScreen from './screens/SettingsScreen';
 import SplashScreen from './screens/SplashScreen';
-import useNavigationStore from './stores/navigationStore';
+import analytics from './utils/analytics';
 import { black, slate300, white } from './utils/colors';
 
 const AppNavigation = createNativeStackNavigator({
@@ -314,22 +314,22 @@ declare global {
 // Create a ref that we can use to access the navigation state
 export const navigationRef = createNavigationContainerRef();
 
+const { trackScreenView } = analytics();
+
 const Navigation = createStaticNavigation(AppNavigation);
 const NavigationWithTracking = () => {
-  const { trackEvent } = useNavigationStore();
-
-  const trackScreenView = () => {
+  const trackScreen = () => {
     const currentRoute = navigationRef.getCurrentRoute();
     if (currentRoute) {
       console.log(`Screen View: ${currentRoute.name}`);
-      trackEvent(`Screen View: ${currentRoute.name}`, {
+      trackScreenView(`${currentRoute.name}`, {
         screenName: currentRoute.name,
         params: currentRoute.params,
       });
     }
   };
 
-  return <Navigation ref={navigationRef} onStateChange={trackScreenView} />;
+  return <Navigation ref={navigationRef} onStateChange={trackScreen} />;
 };
 
 export default NavigationWithTracking;

app/src/screens/Onboarding/PassportCameraScreen.tsx

@@ -18,18 +18,19 @@ import useHapticNavigation from '../../hooks/useHapticNavigation';
 import Bulb from '../../images/icons/passport_camera_bulb.svg';
 import Scan from '../../images/icons/passport_camera_scan.svg';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
-import useNavigationStore from '../../stores/navigationStore';
 import useUserStore from '../../stores/userStore';
+import analytics from '../../utils/analytics';
 import { black, slate800, white } from '../../utils/colors';
 import { checkScannedInfo, formatDateToYYMMDD } from '../../utils/utils';
 
 interface PassportNFCScanScreen {}
 
+const { trackEvent } = analytics();
+
 const PassportCameraScreen: React.FC<PassportNFCScanScreen> = ({}) => {
   const navigation = useNavigation();
   const isFocused = useIsFocused();
   const store = useUserStore();
-  const { trackEvent } = useNavigationStore();
 
   const onPassportRead = useCallback<PassportCameraProps['onPassportRead']>(
     (error, result) => {

app/src/screens/Onboarding/PassportNFCScanScreen.tsx

@@ -25,13 +25,15 @@ import { Title } from '../../components/typography/Title';
 import useHapticNavigation from '../../hooks/useHapticNavigation';
 import NFC_IMAGE from '../../images/nfc.png';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
-import useNavigationStore from '../../stores/navigationStore';
 import { storePassportData } from '../../stores/passportDataProvider';
 import useUserStore from '../../stores/userStore';
+import analytics from '../../utils/analytics';
 import { black, slate100, white } from '../../utils/colors';
 import { buttonTap } from '../../utils/haptic';
 import { parseScanResponse, scan } from '../../utils/nfcScannerNew';
 
+const { trackEvent } = analytics();
+
 interface PassportNFCScanScreenProps {}
 
 const emitter =
@@ -42,7 +44,6 @@ const emitter =
 const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
   const navigation = useNavigation();
   const { passportNumber, dateOfBirth, dateOfExpiry } = useUserStore();
-  const { trackEvent } = useNavigationStore();
   const [dialogMessage, setDialogMessage] = useState('');
   const [isNfcSupported, setIsNfcSupported] = useState(true);
   const [isNfcEnabled, setIsNfcEnabled] = useState(true);

app/src/utils/analytics.ts

@@ -0,0 +1,51 @@
+import { createSegmentClient } from '../Segment';
+
+const segmentClient = createSegmentClient();
+
+function cleanParams(properties: Record<string, any>) {
+  const newParams = {};
+  for (const key of Object.keys(properties.params)) {
+    if (typeof properties.params[key] !== 'function') {
+      (newParams as Record<string, any>)[key] = properties.params[key];
+    }
+  }
+  return newParams;
+}
+
+/*
+  Recoreds analytics events and screen views
+ */
+const analytics = () => {
+  function _track(
+    type: 'event' | 'screen',
+    eventName: string,
+    properties?: Record<string, any>,
+  ) {
+    if (!segmentClient) {
+      return;
+    }
+    const trackMethod =
+      type === 'screen' ? segmentClient.screen : segmentClient.track;
+
+    if (!properties) {
+      return trackMethod(eventName);
+    }
+
+    if (properties.params) {
+      const newParams = cleanParams(properties.params);
+      properties.params = newParams;
+    }
+    trackMethod(eventName, properties);
+  }
+
+  return {
+    trackEvent: (eventName: string, properties?: Record<string, any>) => {
+      _track('event', eventName, properties);
+    },
+    trackScreenView: (screenName: string, properties?: Record<string, any>) => {
+      _track('screen', screenName, properties);
+    },
+  };
+};
+
+export default analytics;

app/src/utils/qrCodeNew.ts

@@ -4,7 +4,6 @@ import { decode } from 'msgpack-lite';
 import { inflate } from 'pako';
 
 import { SelfApp } from '../../../common/src/utils/appType';
-import useNavigationStore from '../stores/navigationStore';
 import { loadPassportData } from '../stores/passportDataProvider';
 
 export default async function handleQRCodeScan(
@@ -47,17 +46,12 @@ export default async function handleQRCodeScan(
 }
 
 const handleUniversalLink = (url: string, setApp: (app: SelfApp) => void) => {
-  const { toast } = useNavigationStore.getState();
   const encodedData = new URL(url).searchParams.get('data');
   console.log('Encoded data:', encodedData);
   if (encodedData) {
     handleQRCodeScan(encodedData, setApp);
   } else {
     console.error('No data found in the Universal Link');
-    toast.show('Error', {
-      message: 'Invalid link',
-      type: 'error',
-    });
   }
 };