Add shop events

src/components/modal/transact-menu/TransactMenu.tsx

@@ -168,7 +168,24 @@ const TransactModal = () => {
       img: () => <Icons.BuyGiftCard />,
       title: t('Buy Gift Cards'),
       description: t('Buy gift cards with crypto'),
-      onPress: () => {},
+      onPress: () => {
+        navigation.navigate('Tabs', {
+          screen: 'Shop',
+          params: {
+            screen: 'Home',
+          },
+        });
+        dispatch(
+          logSegmentEvent(
+            'track',
+            'Clicked Buy Gift Cards',
+            {
+              context: 'TransactMenu',
+            },
+            true,
+          ),
+        );
+      },
     },
   ];
 

src/navigation/tabs/shop/ShopHome.tsx

@@ -25,6 +25,8 @@ import {useAppSelector} from '../../../utils/hooks';
 import {StackScreenProps} from '@react-navigation/stack';
 import {ShopScreens, ShopStackParamList} from './ShopStack';
 import {useTranslation} from 'react-i18next';
+import {useFocusEffect} from '@react-navigation/native';
+import {logSegmentEvent} from '../../../store/app/app.effects';
 
 export enum ShopTabs {
   GIFT_CARDS = 'Gift Cards',
@@ -223,6 +225,10 @@ const ShopHome: React.FC<
     curations,
   ]);
 
+  useFocusEffect(() => {
+    dispatch(logSegmentEvent('track', 'Viewed Shop Tab', undefined, true));
+  });
+
   return (
     <ShopContainer>
       <ScrollView ref={scrollViewRef} keyboardDismissMode="on-drag">

src/navigation/tabs/shop/components/GiftCardCatalog.tsx

@@ -34,10 +34,11 @@ import {useNavigation} from '@react-navigation/native';
 import {GiftCardScreens} from '../gift-card/GiftCardStack';
 import MyGiftCards from './MyGiftCards';
 import FilterSheet, {initializeCategoryMap} from './FilterSheet';
-import {useAppSelector} from '../../../../utils/hooks';
+import {useAppDispatch, useAppSelector} from '../../../../utils/hooks';
 import {APP_NETWORK} from '../../../../constants/config';
 import GhostSvg from '../../../../../assets/img/ghost-cheeky.svg';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../../store/app/app.effects';
 
 const Curations = ({
   curations,
@@ -121,6 +122,7 @@ export default ({
   categories: CategoryWithGiftCards[];
   onSelectedGiftCardsChange: (newNumSelectedGiftCards: number) => void;
 }) => {
+  const dispatch = useAppDispatch();
   const {t} = useTranslation();
   const navigation = useNavigation();
   const theme = useTheme();
@@ -153,8 +155,11 @@ export default ({
           giftCard.displayName.toLowerCase().includes(lowerCaseText),
         );
         setSearchResults(newSearchResults);
+        dispatch(
+          logSegmentEvent('track', 'Searched Gift Cards', {search: text}, true),
+        );
       }, 300),
-    [availableGiftCards],
+    [availableGiftCards, dispatch],
   );
 
   const underlayColor = theme.dark ? '#121212' : '#fbfbff';

src/navigation/tabs/shop/components/ShopOnline.tsx

@@ -28,6 +28,8 @@ import {
 } from './styled/ShopTabComponents';
 import GhostSvg from '../../../../../assets/img/ghost-cheeky.svg';
 import {useTranslation} from 'react-i18next';
+import {useAppDispatch} from '../../../../utils/hooks';
+import {logSegmentEvent} from '../../../../store/app/app.effects';
 
 const SearchResults = styled.View`
   display: flex;
@@ -50,6 +52,7 @@ export const ShopOnline = ({
   categories: CategoryWithIntegrations[];
 }) => {
   const {t} = useTranslation();
+  const dispatch = useAppDispatch();
   const navigation = useNavigation();
   const theme = useTheme();
   const {control} = useForm();
@@ -62,6 +65,9 @@ export const ShopOnline = ({
       integration.displayName.toLowerCase().includes(text.toLocaleLowerCase()),
     );
     setSearchResults(newSearchResults);
+    dispatch(
+      logSegmentEvent('track', 'Searched Online Brands', {search: text}, true),
+    );
   }, 300);
 
   const FullIntegrationsList = () => (

src/navigation/tabs/shop/gift-card/screens/BuyGiftCard.tsx

@@ -1,4 +1,4 @@
-import React, {useLayoutEffect, useState} from 'react';
+import React, {useEffect, useLayoutEffect, useState} from 'react';
 import {Platform, ScrollView, View} from 'react-native';
 import {StackScreenProps} from '@react-navigation/stack';
 import LinearGradient from 'react-native-linear-gradient';
@@ -44,6 +44,7 @@ import {APP_NETWORK} from '../../../../../constants/config';
 import {useAppSelector} from '../../../../../utils/hooks';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../../../store/app/app.effects';
 
 const GradientBox = styled(LinearGradient)`
   width: ${WIDTH}px;
@@ -141,6 +142,18 @@ const BuyGiftCard = ({
       },
     });
   });
+  useEffect(() => {
+    dispatch(
+      logSegmentEvent(
+        'track',
+        'Viewed Gift Card',
+        {
+          giftCardBrand: cardConfig.name,
+        },
+        true,
+      ),
+    );
+  }, [cardConfig.name, dispatch]);
 
   const showActivationFeeSheet = (
     activationFee: number,
@@ -287,6 +300,16 @@ const BuyGiftCard = ({
   };
 
   const buyGiftCard = () => {
+    dispatch(
+      logSegmentEvent(
+        'track',
+        'Started Gift Card Purchase',
+        {
+          giftCardBrand: cardConfig.name,
+        },
+        true,
+      ),
+    );
     const selectedAmount = (cardConfig.supportedAmounts || [])[
       selectedAmountIndex
     ];

src/navigation/tabs/shop/gift-card/screens/GiftCardDetails.tsx

@@ -58,6 +58,7 @@ import {useAppDispatch, useAppSelector} from '../../../../../utils/hooks';
 import {DeviceEmitterEvents} from '../../../../../constants/device-emitter-events';
 import Icons from '../../../../wallet/components/WalletIcons';
 import {useTranslation} from 'react-i18next';
+import {logSegmentEvent} from '../../../../../store/app/app.effects';
 
 const maxWidth = 320;
 
@@ -350,13 +351,25 @@ const GiftCardDetails = ({
               <ActionContainer>
                 {cardConfig.redeemUrl ? (
                   <Button
-                    onPress={() =>
+                    onPress={() => {
                       Linking.openURL(
                         `${cardConfig.redeemUrl as string}${
                           giftCard.claimCode
                         }`,
-                      )
-                    }
+                      );
+                      dispatch(
+                        logSegmentEvent(
+                          'track',
+                          'Redeemed Gift Card',
+                          {
+                            giftCardAmount: giftCard.amount,
+                            giftCardBrand: cardConfig.name,
+                            giftCardCurrency: cardConfig.currency,
+                          },
+                          true,
+                        ),
+                      );
+                    }}
                     buttonStyle={'primary'}>
                     {t('Redeem Now')}
                   </Button>

src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx

@@ -134,6 +134,12 @@ const Confirm = () => {
     setWalletSelectorVisible(true);
   };
 
+  const getTransactionCurrency = () => {
+    return wallet
+      ? wallet.currencyAbbreviation.toUpperCase()
+      : coinbaseAccount!.currency.code;
+  };
+
   useEffect(() => {
     return () => {
       dispatch(ShopActions.deletedUnsoldGiftCards());
@@ -294,6 +300,23 @@ const Confirm = () => {
         cardConfig,
       },
     });
+    const purchaseEventName =
+      giftCard.status === 'FAILURE'
+        ? 'Failed Gift Card'
+        : 'Purchased Gift Card';
+    dispatch(
+      logSegmentEvent(
+        'track',
+        purchaseEventName,
+        {
+          giftCardAmount: amount,
+          giftCardBrand: cardConfig.name,
+          giftCardCurrency: cardConfig.currency,
+          coin: getTransactionCurrency(),
+        },
+        true,
+      ),
+    );
   };
 
   const showError = ({