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 = ({