diff --git a/src/components/modal/transact-menu/TransactMenu.tsx b/src/components/modal/transact-menu/TransactMenu.tsx index 953c2b490..95059cdf5 100644 --- a/src/components/modal/transact-menu/TransactMenu.tsx +++ b/src/components/modal/transact-menu/TransactMenu.tsx @@ -168,7 +168,24 @@ const TransactModal = () => { img: () => , 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, + ), + ); + }, }, ]; diff --git a/src/navigation/tabs/shop/ShopHome.tsx b/src/navigation/tabs/shop/ShopHome.tsx index a06063fdd..0b4f73bdd 100644 --- a/src/navigation/tabs/shop/ShopHome.tsx +++ b/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 ( diff --git a/src/navigation/tabs/shop/components/GiftCardCatalog.tsx b/src/navigation/tabs/shop/components/GiftCardCatalog.tsx index 5d9bbfacc..782eefec2 100644 --- a/src/navigation/tabs/shop/components/GiftCardCatalog.tsx +++ b/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'; diff --git a/src/navigation/tabs/shop/components/ShopOnline.tsx b/src/navigation/tabs/shop/components/ShopOnline.tsx index d1a81136e..5a77575bb 100644 --- a/src/navigation/tabs/shop/components/ShopOnline.tsx +++ b/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 = () => ( diff --git a/src/navigation/tabs/shop/gift-card/screens/BuyGiftCard.tsx b/src/navigation/tabs/shop/gift-card/screens/BuyGiftCard.tsx index 5150c6ce4..6b1095fb5 100644 --- a/src/navigation/tabs/shop/gift-card/screens/BuyGiftCard.tsx +++ b/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 ]; diff --git a/src/navigation/tabs/shop/gift-card/screens/GiftCardDetails.tsx b/src/navigation/tabs/shop/gift-card/screens/GiftCardDetails.tsx index 043d68ae4..27eef0f28 100644 --- a/src/navigation/tabs/shop/gift-card/screens/GiftCardDetails.tsx +++ b/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 = ({ {cardConfig.redeemUrl ? ( diff --git a/src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx b/src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx index 30e64c1d2..8ede0cd75 100644 --- a/src/navigation/wallet/screens/send/confirm/GiftCardConfirm.tsx +++ b/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 = ({