Merge pull request #107 from Gamboster/feat/segmentEvents

Feat: segment events
bitpay · Jun 21, 2022 · f4d18f0 · f4d18f0
2 parents 9010ce4 + 9884c56
commit f4d18f0
Show file tree

Hide file tree

Showing 61 changed files with 1,046 additions and 222 deletions.
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -22,7 +22,6 @@ import {AppEffects, AppActions} from './store/app';
 import {BitPayDarkTheme, BitPayLightTheme} from './themes/bitpay';
 import {LogActions} from './store/log';
 import {useAppDispatch, useAppSelector, useDeeplinks} from './utils/hooks';
-import analytics from '@segment/analytics-react-native';
 import i18n from 'i18next';
 
 import BitpayIdStack, {
@@ -82,6 +81,7 @@ import DebugScreen, {DebugScreenParamList} from './navigation/Debug';
 import CardActivationStack, {
   CardActivationStackParamList,
 } from './navigation/card-activation/CardActivationStack';
+import {logSegmentEvent} from './store/app/app.effects';
 
 // ROOT NAVIGATION CONFIG
 export type RootStackParamList = {
@@ -191,9 +191,6 @@ export default () => {
   const lockAuthorizedUntil = useAppSelector(
     ({APP}) => APP.lockAuthorizedUntil,
   );
-  const user = useAppSelector(
-    ({APP, BITPAY_ID}) => BITPAY_ID.user[APP.network],
-  );
 
   // MAIN APP INIT
   useEffect(() => {
@@ -325,10 +322,16 @@ export default () => {
                   const tabName = history[history.length - 1].key.split('-')[0];
                   name = `${tabName} Tab`;
                 }
-                analytics.screen(name, {
-                  screen: params?.screen || '',
-                  appUser: user?.eid || '',
-                });
+                dispatch(
+                  logSegmentEvent(
+                    'screen',
+                    name,
+                    {
+                      screen: params?.screen || '',
+                    },
+                    true,
+                  ),
+                );
               }
             }
           }, 300)}>

diff --git a/src/components/modal/transact-menu/TransactMenu.tsx b/src/components/modal/transact-menu/TransactMenu.tsx
@@ -8,9 +8,9 @@ import {ActiveOpacity, SheetContainer} from '../../styled/Containers';
 import {BaseText, H6} from '../../styled/Text';
 import SheetModal from '../base/sheet/SheetModal';
 import Icons from './TransactMenuIcons';
-import analytics from '@segment/analytics-react-native';
-import {useAppSelector} from '../../../utils/hooks';
 import {useTranslation} from 'react-i18next';
+import {useAppDispatch} from '../../../utils/hooks';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 
 const TransactButton = styled.View`
   justify-content: center;
@@ -83,9 +83,7 @@ const TransactModal = () => {
   const [modalVisible, setModalVisible] = useState(false);
   const hideModal = () => setModalVisible(false);
   const showModal = () => setModalVisible(true);
-  const user = useAppSelector(
-    ({APP, BITPAY_ID}) => BITPAY_ID.user[APP.network],
-  );
+  const dispatch = useAppDispatch();
 
   const TransactMenuList: Array<TransactMenuItemProps> = [
     {
@@ -94,10 +92,16 @@ const TransactModal = () => {
       title: t('Buy Crypto'),
       description: t('Buy crypto with cash'),
       onPress: () => {
-        analytics.track('BitPay App - Clicked Buy Crypto', {
-          from: 'TransactMenu',
-          appUser: user?.eid || '',
-        });
+        dispatch(
+          logSegmentEvent(
+            'track',
+            'Clicked Buy Crypto',
+            {
+              context: 'TransactMenu',
+            },
+            true,
+          ),
+        );
         navigation.navigate('Wallet', {
           screen: 'Amount',
           params: {
@@ -122,10 +126,16 @@ const TransactModal = () => {
       title: t('Exchange'),
       description: t('Swap crypto for another'),
       onPress: () => {
-        analytics.track('BitPay App - Clicked Swap Crypto', {
-          from: 'TransactMenu',
-          appUser: user?.eid || '',
-        });
+        dispatch(
+          logSegmentEvent(
+            'track',
+            'Clicked Swap Crypto',
+            {
+              context: 'TransactMenu',
+            },
+            true,
+          ),
+        );
         navigation.navigate('SwapCrypto', {screen: 'Root'});
       },
     },
@@ -167,6 +177,11 @@ const TransactModal = () => {
     img: () => <Icons.Scan />,
     title: t('Scan'),
     onPress: () => {
+      dispatch(
+        logSegmentEvent('track', 'Open Scanner', {
+          context: 'TransactMenu',
+        }),
+      );
       navigation.navigate('Scan', {screen: 'Root'});
     },
   };

diff --git a/src/navigation/auth/screens/VerifyEmail.tsx b/src/navigation/auth/screens/VerifyEmail.tsx
@@ -3,6 +3,7 @@ import React, {useEffect, useRef} from 'react';
 import {useTranslation} from 'react-i18next';
 import styled from 'styled-components/native';
 import {Link} from '../../../components/styled/Text';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 import {BitPayIdEffects} from '../../../store/bitpay-id';
 import {useAppDispatch, useAppSelector} from '../../../utils/hooks';
 import {AuthStackParamList} from '../AuthStack';
@@ -77,6 +78,17 @@ const VerifyEmailScreen: React.FC<VerifyEmailScreenProps> = ({navigation}) => {
         clearInterval(pollId.current);
       }
 
+      dispatch(
+        logSegmentEvent(
+          'track',
+          'Verified Email',
+          {
+            email: email || '',
+          },
+          true,
+        ),
+      );
+
       navigation.navigate('CreateAccount');
     }
   }, [isVerified, csrfToken, navigation, dispatch]);

diff --git a/src/navigation/card/components/CardDashboard.tsx b/src/navigation/card/components/CardDashboard.tsx
@@ -1,6 +1,5 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import analytics from '@segment/analytics-react-native';
 import React, {useCallback, useLayoutEffect, useMemo} from 'react';
 import {useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
@@ -26,6 +25,7 @@ import {CardProvider} from '../../../constants/card';
 import {CARD_WIDTH} from '../../../constants/config.card';
 import {navigationRef} from '../../../Root';
 import {showBottomNotificationModal} from '../../../store/app/app.actions';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 import {selectBrazeCardOffers} from '../../../store/app/app.selectors';
 import {CardEffects} from '../../../store/card';
 import {Card, UiTransaction} from '../../../store/card/card.models';
@@ -118,6 +118,8 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   );
 
   const goToCardSettings = () => {
+    dispatch(logSegmentEvent('track', 'Clicked Card Settings', {}, true));
+
     navigation.navigate('Settings', {
       id: activeCard.id,
     });
@@ -126,6 +128,8 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   goToCardSettingsRef.current = goToCardSettings;
 
   const goToReferAndEarn = () => {
+    dispatch(logSegmentEvent('track', 'Clicked Refer and Earn', {}, true));
+
     navigation.navigate('Referral', {card: activeCard});
   };
   const goToReferAndEarnRef = useRef(goToReferAndEarn);
@@ -163,10 +167,16 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
             {
               text: t('Add funds'),
               action: () => {
-                analytics.track('BitPay App - Clicked Buy Crypto', {
-                  from: 'CardDashboard',
-                  appUser: user?.eid || '',
-                });
+                dispatch(
+                  logSegmentEvent(
+                    'track',
+                    'Clicked Buy Crypto',
+                    {
+                      context: 'CardDashboard',
+                    },
+                    true,
+                  ),
+                );
                 navigator.navigate('Wallet', {
                   screen: WalletScreens.AMOUNT,
                   params: {

diff --git a/src/navigation/card/components/CardOffers.tsx b/src/navigation/card/components/CardOffers.tsx
@@ -9,6 +9,7 @@ import {
   CardContainer,
 } from '../../../components/styled/Containers';
 import {BaseText} from '../../../components/styled/Text';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 import {CardEffects} from '../../../store/card';
 import {
   isCaptionedContentCard,
@@ -86,6 +87,17 @@ const CardOffers: React.VFC<CardOffersProps> = props => {
   const onPress = () => {
     if (!contentCard.id.startsWith('dev_')) {
       ReactAppboy.logContentCardClicked(contentCard.id);
+
+      dispatch(
+        logSegmentEvent(
+          'track',
+          'Clicked Card Offer',
+          {
+            id: contentCard.id || '',
+          },
+          true,
+        ),
+      );
     }
 
     dispatch(CardEffects.startOpenDosh(userEmail || ''));

diff --git a/src/navigation/card/screens/settings/CustomizeVirtualCard.tsx b/src/navigation/card/screens/settings/CustomizeVirtualCard.tsx
@@ -30,6 +30,7 @@ import CardFront from '../../components/CardFront';
 import CheckIcon from './CheckIcon';
 import * as Styled from './CustomizeVirtualCard.styled';
 import {CardBrand} from '../../../../constants/card';
+import {logSegmentEvent} from '../../../../store/app/app.effects';
 
 export interface CustomizeVirtualCardParamList {
   card: Card;
@@ -159,6 +160,12 @@ const CustomizeVirtualCard: React.FC<
   const onSavePress = () => {
     dispatch(CardActions.virtualDesignCurrencyUpdated(selectedDesign));
 
+    dispatch(
+      logSegmentEvent('track', 'Save Virtual Card selected design', {
+        selectedDesign: selectedDesign || '',
+      }),
+    );
+
     if (navigation.canGoBack()) {
       navigation.goBack();
     } else {

diff --git a/src/navigation/card/screens/settings/Referral.tsx b/src/navigation/card/screens/settings/Referral.tsx
@@ -45,6 +45,7 @@ import ReferredUsersSkeleton from '../../components/ReferredUsersSkeleton';
 import ReferralCodeSkeleton from '../../components/ReferralCodeSkeleton';
 import {BASE_BITPAY_URLS} from '../../../../constants/config';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../../store/app/app.effects';
 
 export interface ReferralParamList {
   card: Card;
@@ -152,6 +153,9 @@ const Referral = ({}) => {
     if (!copied) {
       Clipboard.setString(code);
       setCopied(true);
+      dispatch(
+        logSegmentEvent('track', 'Copied Share Referral Code', {}, true),
+      );
     }
   };
 
@@ -177,6 +181,10 @@ const Referral = ({}) => {
       await Share.share({
         message,
       });
+
+      dispatch(
+        logSegmentEvent('track', 'Clicked Share Referral Code', {}, true),
+      );
     } catch (e) {}
   };
   const currentDate = new Date().getTime();

diff --git a/src/navigation/coinbase/components/CoinbaseIntro.tsx b/src/navigation/coinbase/components/CoinbaseIntro.tsx
@@ -10,6 +10,7 @@ import Coinbase from '../../../api/coinbase/index';
 import {AppEffects} from '../../../store/app';
 import {useAppDispatch} from '../../../utils/hooks';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 
 const signupUrl: string = 'https://www.coinbase.com/signup';
 
@@ -63,6 +64,16 @@ const CoinbaseIntro = () => {
     } else {
       url = signupUrl;
     }
+    dispatch(
+      logSegmentEvent(
+        'track',
+        'Clicked Connect to Coinbase',
+        {
+          context,
+        },
+        true,
+      ),
+    );
     dispatch(AppEffects.openUrlWithInAppBrowser(url));
   };
 

diff --git a/src/navigation/coinbase/screens/CoinbaseAccount.tsx b/src/navigation/coinbase/screens/CoinbaseAccount.tsx
@@ -51,6 +51,7 @@ import {
 import Amount from '../../wallet/screens/Amount';
 import {Wallet} from '../../../store/wallet/wallet.models';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 
 const AccountContainer = styled.View`
   flex: 1;
@@ -321,6 +322,16 @@ const CoinbaseAccount = ({
     dispatch(
       showOnGoingProcessModal(OnGoingProcessMessages.FETCHING_COINBASE_DATA),
     );
+    dispatch(
+      logSegmentEvent(
+        'track',
+        'Clicked Receive',
+        {
+          context: 'CoinbaseAccount',
+        },
+        true,
+      ),
+    );
     dispatch(coinbaseCreateAddress(accountId))
       .then(async newAddress => {
         dispatch(dismissOnGoingProcessModal());
@@ -353,6 +364,16 @@ const CoinbaseAccount = ({
 
   const onSelectedWallet = async (newWallet?: Wallet) => {
     setWalletModalVisible(false);
+    dispatch(
+      logSegmentEvent(
+        'track',
+        'Clicked Send',
+        {
+          context: 'CoinbaseAccount',
+        },
+        true,
+      ),
+    );
     if (newWallet) {
       setSelectedWallet(newWallet);
       await sleep(500);

diff --git a/src/navigation/coinbase/screens/CoinbaseSettings.tsx b/src/navigation/coinbase/screens/CoinbaseSettings.tsx
@@ -31,6 +31,7 @@ import {COINBASE_ENV} from '../../../api/coinbase/coinbase.constants';
 import CoinbaseSvg from '../../../../assets/img/logos/coinbase.svg';
 import {CoinbaseStackParamList} from '../CoinbaseStack';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 
 const SettingsContainer = styled.SafeAreaView`
   flex: 1;
@@ -149,6 +150,7 @@ const CoinbaseSettings = () => {
 
   const deleteAccount = async () => {
     await dispatch(coinbaseDisconnectAccount());
+    dispatch(logSegmentEvent('track', 'Coinbase Disconnected', {}, true));
     if (fromScreen === 'CoinbaseDashboard') {
       navigation.navigate('Tabs', {screen: 'Home'});
     } else {

diff --git a/src/navigation/onboarding/screens/OnboardingStart.tsx b/src/navigation/onboarding/screens/OnboardingStart.tsx
@@ -130,7 +130,7 @@ const OnboardingStart: React.VFC<OnboardingStartScreenProps> = () => {
   const askForTrackingThenNavigate = useCallback(
     async (cb: () => void) => {
       haptic('impactLight');
-      await dispatch(askForTrackingPermissionAndEnableSdks());
+      await dispatch(askForTrackingPermissionAndEnableSdks(true));
       cb();
     },
     [dispatch],