Merge pull request #179 from cnguyen812/feat/card-analytics

Feat/card analytics
bitpay · Jul 1, 2022 · fd4af63 · fd4af63
2 parents 8907a87 + 30b7de4
commit fd4af63
Show file tree

Hide file tree

Showing 12 changed files with 172 additions and 116 deletions.
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -89,15 +89,14 @@ import CoinbaseStack, {
   CoinbaseStackParamList,
 } from './navigation/coinbase/CoinbaseStack';
 import BpDevtools from './components/bp-devtools/BpDevtools';
-import {DEVTOOLS_ENABLED} from './constants/config';
+import {APP_ANALYTICS_ENABLED, DEVTOOLS_ENABLED} from './constants/config';
 import Blur from './components/blur/Blur';
 import DebugScreen, {DebugScreenParamList} from './navigation/Debug';
 import CardActivationStack, {
   CardActivationStackParamList,
 } from './navigation/card-activation/CardActivationStack';
 import {sleep} from './utils/helper-methods';
-import ReactAppboy from 'react-native-appboy-sdk';
-import {handleBwsEvent, logSegmentEvent} from './store/app/app.effects';
+import {Analytics, handleBwsEvent} from './store/app/app.effects';
 
 // ROOT NAVIGATION CONFIG
 export type RootStackParamList = {
@@ -365,21 +364,16 @@ export default () => {
               let {name, params} = navEvent.routes[routes.length - 1];
               dispatch(AppActions.setCurrentRoute([name, params]));
               dispatch(LogActions.info(`Navigation event... ${name}`));
-              if (!__DEV__) {
+
+              if (APP_ANALYTICS_ENABLED) {
                 if (name === 'Tabs') {
                   const {history} = navEvent.routes[routes.length - 1].state;
                   const tabName = history[history.length - 1].key.split('-')[0];
                   name = `${tabName} Tab`;
                 }
+
                 dispatch(
-                  logSegmentEvent(
-                    'screen',
-                    name,
-                    {
-                      screen: params?.screen || '',
-                    },
-                    true,
-                  ),
+                  Analytics.screen(name, {screen: params?.screen || ''}),
                 );
               }
             }

diff --git a/src/constants/config.ts b/src/constants/config.ts
@@ -2,6 +2,7 @@ import {Network} from '.';
 
 export const DEVTOOLS_ENABLED = false;
 export const STATIC_CONTENT_CARDS_ENABLED = true;
+export const APP_ANALYTICS_ENABLED = !__DEV__;
 
 // GENERAL
 export const APP_NAME = 'bitpay';

diff --git a/src/navigation/auth/screens/VerifyEmail.tsx b/src/navigation/auth/screens/VerifyEmail.tsx
@@ -3,7 +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 {Analytics} from '../../../store/app/app.effects';
 import {BitPayIdEffects} from '../../../store/bitpay-id';
 import {useAppDispatch, useAppSelector} from '../../../utils/hooks';
 import {AuthStackParamList} from '../AuthStack';
@@ -79,8 +79,7 @@ const VerifyEmailScreen: React.FC<VerifyEmailScreenProps> = ({navigation}) => {
       }
 
       dispatch(
-        logSegmentEvent(
-          'track',
+        Analytics.track(
           'Verified Email',
           {
             email: email || '',

diff --git a/src/navigation/card/components/CardDashboard.tsx b/src/navigation/card/components/CardDashboard.tsx
@@ -25,7 +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 {Analytics} 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';
@@ -94,12 +94,12 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   const network = useAppSelector(({APP}) => APP.network);
   const brazeCardOffers = useAppSelector(selectBrazeCardOffers);
 
-  const getLengthOfWalletsWithBalance = useMemo(
+  const hasWalletsWithBalance = useMemo(
     () =>
       Object.values(keys)
         .flatMap(key => key.wallets)
         .filter(wallet => wallet.balance.sat > 0 && wallet.network === network)
-        .length,
+        .length > 0,
     [keys, network],
   );
 
@@ -118,7 +118,7 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   );
 
   const goToCardSettings = () => {
-    dispatch(logSegmentEvent('track', 'Clicked Card Settings', {}, true));
+    dispatch(Analytics.track('Clicked Card Settings', {}, true));
 
     navigation.navigate('Settings', {
       id: activeCard.id,
@@ -128,7 +128,7 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   goToCardSettingsRef.current = goToCardSettings;
 
   const goToReferAndEarn = () => {
-    dispatch(logSegmentEvent('track', 'Clicked Refer and Earn', {}, true));
+    dispatch(Analytics.track('Clicked Refer and Earn', {}, true));
 
     navigation.navigate('Referral', {card: activeCard});
   };
@@ -146,7 +146,10 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
   };
 
   const goToAmountScreen = () => {
-    if (getLengthOfWalletsWithBalance) {
+    dispatch(
+      Analytics.track('Clicked Add Funds', {context: 'CardDashboard'}, true),
+    );
+    if (hasWalletsWithBalance) {
       navigator.navigate('Wallet', {
         screen: WalletScreens.AMOUNT,
         params: {
@@ -168,11 +171,10 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
               text: t('Add funds'),
               action: () => {
                 dispatch(
-                  logSegmentEvent(
-                    'track',
+                  Analytics.track(
                     'Clicked Buy Crypto',
                     {
-                      context: 'CardDashboard',
+                      context: 'CardDashboard - No funds availiable',
                     },
                     true,
                   ),

diff --git a/src/navigation/card/components/CardOffers.tsx b/src/navigation/card/components/CardOffers.tsx
@@ -9,7 +9,7 @@ import {
   CardContainer,
 } from '../../../components/styled/Containers';
 import {BaseText} from '../../../components/styled/Text';
-import {logSegmentEvent} from '../../../store/app/app.effects';
+import {Analytics} from '../../../store/app/app.effects';
 import {CardEffects} from '../../../store/card';
 import {
   isCaptionedContentCard,
@@ -89,11 +89,11 @@ const CardOffers: React.VFC<CardOffersProps> = props => {
       ReactAppboy.logContentCardClicked(contentCard.id);
 
       dispatch(
-        logSegmentEvent(
-          'track',
+        Analytics.track(
           'Clicked Card Offer',
           {
             id: contentCard.id || '',
+            context: 'Card Offers component',
           },
           true,
         ),

diff --git a/src/navigation/card/components/CardSettingsList.tsx b/src/navigation/card/components/CardSettingsList.tsx
@@ -8,6 +8,7 @@ import {Link, Smallest} from '../../../components/styled/Text';
 import {URL} from '../../../constants';
 import {CardBrand, CardProvider} from '../../../constants/card';
 import {AppEffects} from '../../../store/app';
+import {Analytics} from '../../../store/app/app.effects';
 import {CardActions, CardEffects} from '../../../store/card';
 import {Card} from '../../../store/card/card.models';
 import {useAppDispatch, useAppSelector} from '../../../utils/hooks';
@@ -200,6 +201,13 @@ const SettingsList: React.FC<SettingsListProps> = props => {
           <Styled.SettingsLink
             Icon={OffersIcon}
             onPress={async () => {
+              dispatch(
+                Analytics.track(
+                  'Clicked Card Offer',
+                  {context: 'Card Settings'},
+                  true,
+                ),
+              );
               dispatch(CardEffects.startOpenDosh(user?.email || ''));
             }}>
             {t('Card Offers')}

diff --git a/src/navigation/card/screens/settings/CustomizeVirtualCard.tsx b/src/navigation/card/screens/settings/CustomizeVirtualCard.tsx
@@ -30,7 +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';
+import {Analytics} from '../../../../store/app/app.effects';
 
 export interface CustomizeVirtualCardParamList {
   card: Card;
@@ -161,9 +161,13 @@ const CustomizeVirtualCard: React.FC<
     dispatch(CardActions.virtualDesignCurrencyUpdated(selectedDesign));
 
     dispatch(
-      logSegmentEvent('track', 'Save Virtual Card selected design', {
-        selectedDesign: selectedDesign || '',
-      }),
+      Analytics.track(
+        'Save Virtual Card selected design',
+        {
+          selectedDesign: selectedDesign || '',
+        },
+        true,
+      ),
     );
 
     if (navigation.canGoBack()) {

diff --git a/src/navigation/card/screens/settings/Referral.tsx b/src/navigation/card/screens/settings/Referral.tsx
@@ -45,7 +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';
+import {Analytics} from '../../../../store/app/app.effects';
 
 export interface ReferralParamList {
   card: Card;
@@ -140,22 +140,17 @@ const Referral = ({}) => {
   const code = useAppSelector(({CARD}) => CARD.referralCode[id]);
   const referredUsers = useAppSelector(({CARD}) => CARD.referredUsers[id]);
 
-  const init = () => {
+  useEffect(() => {
     dispatch(CardEffects.START_FETCH_REFERRAL_CODE(id));
     dispatch(CardEffects.START_FETCH_REFERRED_USERS(id));
-  };
-  useEffect(() => {
-    init();
   }, [id]);
 
   const copyToClipboard = () => {
     haptic('impactLight');
     if (!copied) {
       Clipboard.setString(code);
       setCopied(true);
-      dispatch(
-        logSegmentEvent('track', 'Copied Share Referral Code', {}, true),
-      );
+      dispatch(Analytics.track('Copied Share Referral Code', {}, true));
     }
   };
 
@@ -182,9 +177,7 @@ const Referral = ({}) => {
         message,
       });
 
-      dispatch(
-        logSegmentEvent('track', 'Clicked Share Referral Code', {}, true),
-      );
+      dispatch(Analytics.track('Clicked Share Referral Code', {}, true));
     } catch (e) {}
   };
   const currentDate = new Date().getTime();

diff --git a/src/navigation/wallet/screens/send/confirm/DebitCardConfirm.tsx b/src/navigation/wallet/screens/send/confirm/DebitCardConfirm.tsx
@@ -25,7 +25,7 @@ import {
 } from '../../../../../store/wallet/effects/send/send';
 import {sleep, formatFiatAmount} from '../../../../../utils/helper-methods';
 import {
-  logSegmentEvent,
+  Analytics,
   startOnGoingProcessModal,
 } from '../../../../../store/app/app.effects';
 import {OnGoingProcessMessages} from '../../../../../components/modal/ongoing-process/OngoingProcess';
@@ -415,8 +415,7 @@ const Confirm = () => {
               try {
                 await sendPayment();
                 dispatch(
-                  logSegmentEvent(
-                    'track',
+                  Analytics.track(
                     'Adding funds to Debit Card',
                     {
                       amount: amount,