feat: gift tracking

packages/shared/src/components/ProfileMenu.tsx

@@ -35,8 +35,9 @@ import { checkIsExtension, isIOSNative } from '../lib/func';
 import { useDndContext } from '../contexts/DndContext';
 import { LazyModal } from './modals/common/types';
 import { usePlusSubscription } from '../hooks/usePlusSubscription';
-import { LogEvent, TargetId } from '../lib/log';
+import { LogEvent, TargetId, TargetType } from '../lib/log';
 import { GiftIcon } from './icons/gift';
+import { useLogContext } from '../contexts/LogContext';
 
 interface ListItem {
   title: string;
@@ -55,6 +56,7 @@ export default function ProfileMenu({
   const { user, logout, isGdprCovered } = useAuthContext();
   const { isActive: isDndActive, setShowDnd } = useDndContext();
   const { isPlus, logSubscriptionEvent } = usePlusSubscription();
+  const { logEvent } = useLogContext();
 
   const items: ListItem[] = useMemo(() => {
     const list: ListItem[] = [
@@ -160,7 +162,14 @@ export default function ProfileMenu({
       title: 'Gift daily.dev Plus',
       buttonProps: {
         icon: <GiftIcon />,
-        onClick: () => openModal({ type: LazyModal.GiftPlus }),
+        onClick: () => {
+          logEvent({
+            event_name: LogEvent.GiftSubscription,
+            target_id: TargetId.ProfileDropdown,
+            target_type: TargetType.Plus,
+          });
+          openModal({ type: LazyModal.GiftPlus });
+        },
       },
     });
 
@@ -174,14 +183,15 @@ export default function ProfileMenu({
 
     return list.filter(Boolean);
   }, [
+    user.permalink,
     isGdprCovered,
-    isDndActive,
     isPlus,
     logSubscriptionEvent,
-    logout,
-    openModal,
+    isDndActive,
     setShowDnd,
-    user.permalink,
+    openModal,
+    logEvent,
+    logout,
   ]);
 
   if (!user) {

packages/shared/src/components/comments/CommentActionButtons.tsx

@@ -25,7 +25,7 @@ import {
 } from '../buttons/Button';
 import { ClickableText } from '../buttons/ClickableText';
 import { SimpleTooltip } from '../tooltips/SimpleTooltip';
-import { Origin } from '../../lib/log';
+import { LogEvent, Origin, TargetId, TargetType } from '../../lib/log';
 import type { Post } from '../../graphql/posts';
 import { UserVote } from '../../graphql/posts';
 import { AuthTriggers } from '../../lib/auth';
@@ -48,6 +48,7 @@ import { ContentPreferenceType } from '../../graphql/contentPreference';
 import { isFollowingContent } from '../../hooks/contentPreference/types';
 import { useIsSpecialUser } from '../../hooks/auth/useIsSpecialUser';
 import { GiftIcon } from '../icons/gift';
+import { useLogContext } from '../../contexts/LogContext';
 
 export interface CommentActionProps {
   onComment: (comment: Comment, parentId: string | null) => void;
@@ -84,6 +85,7 @@ export default function CommentActionButtons({
   const { onMenuClick, isOpen, onHide } = useContextMenu({ id });
   const { openModal } = useLazyModal();
   const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
   const [voteState, setVoteState] = useState<VoteEntityPayload>(() => {
     return {
       id: comment.id,
@@ -265,13 +267,19 @@ export default function CommentActionButtons({
   if (comment.author.id !== user?.id && !comment.author.isPlus) {
     commentOptions.push({
       label: 'Gift daily.dev Plus',
-      action: () =>
+      action: () => {
+        logEvent({
+          event_name: LogEvent.GiftSubscription,
+          target_id: TargetId.ContextMenu,
+          target_type: TargetType.Plus,
+        });
         openModal({
           type: LazyModal.GiftPlus,
           props: {
             preselected: comment.author as UserShortProfile,
           },
-        }),
+        });
+      },
       icon: <GiftIcon />,
     });
   }

packages/shared/src/components/plus/PlusInfo.tsx

@@ -20,14 +20,15 @@ import {
   ButtonVariant,
 } from '../buttons/Button';
 import { usePlusSubscription } from '../../hooks/usePlusSubscription';
-import { LogEvent } from '../../lib/log';
+import { LogEvent, TargetId, TargetType } from '../../lib/log';
 import { useGiftUserContext } from './GiftUserContext';
 import { PlusOptionRadio } from './PlusOptionRadio';
 import { GiftingSelectedUser } from './GiftingSelectedUser';
 import ConditionalWrapper from '../ConditionalWrapper';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { LazyModal } from '../modals/common/types';
 import { GiftIcon } from '../icons/gift';
+import { useLogContext } from '../../contexts/LogContext';
 
 type PlusInfoProps = {
   productOptions: ProductOption[];
@@ -73,6 +74,7 @@ export const PlusInfo = ({
   const { openModal } = useLazyModal();
   const { logSubscriptionEvent } = usePlusSubscription();
   const { giftToUser } = useGiftUserContext();
+  const { logEvent } = useLogContext();
   const { title, description, subtitle } =
     copy[giftToUser ? PlusType.Gift : PlusType.Self];
 
@@ -109,7 +111,14 @@ export const PlusInfo = ({
               icon={<GiftIcon />}
               size={ButtonSize.XSmall}
               variant={ButtonVariant.Float}
-              onClick={() => openModal({ type: LazyModal.GiftPlus })}
+              onClick={() => {
+                logEvent({
+                  event_name: LogEvent.GiftSubscription,
+                  target_id: TargetId.PlusPage,
+                  target_type: TargetType.Plus,
+                });
+                openModal({ type: LazyModal.GiftPlus });
+              }}
             >
               Buy as a gift
             </Button>

packages/shared/src/components/profile/Header.tsx

@@ -19,14 +19,15 @@ import {
 import { UpgradeToPlus } from '../UpgradeToPlus';
 import { useContentPreferenceStatusQuery } from '../../hooks/contentPreference/useContentPreferenceStatusQuery';
 import { usePlusSubscription } from '../../hooks/usePlusSubscription';
-import { LogEvent, TargetId } from '../../lib/log';
+import { LogEvent, TargetId, TargetType } from '../../lib/log';
 import CustomFeedOptionsMenu from '../CustomFeedOptionsMenu';
 import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
 import { useLazyModal } from '../../hooks/useLazyModal';
 import { LazyModal } from '../modals/common/types';
 import { MenuIcon } from '../MenuIcon';
 import { GiftIcon } from '../icons/gift';
 import type { MenuItemProps } from '../fields/ContextMenu';
+import { useLogContext } from '../../contexts/LogContext';
 
 export interface HeaderProps {
   user: PublicProfile;
@@ -55,6 +56,7 @@ export function Header({
     entity: ContentPreferenceType.User,
   });
   const { unblock, block } = useContentPreference();
+  const { logEvent } = useLogContext();
 
   const onReportUser = React.useCallback(
     (defaultBlocked = false) => {
@@ -103,11 +105,17 @@ export function Header({
     options.push({
       icon: <MenuIcon Icon={GiftIcon} />,
       label: 'Gift daily.dev Plus',
-      action: () =>
+      action: () => {
+        logEvent({
+          event_name: LogEvent.GiftSubscription,
+          target_id: TargetId.ProfilePage,
+          target_type: TargetType.Plus,
+        });
         openModal({
           type: LazyModal.GiftPlus,
           props: { preselected: user as UserShortProfile },
-        }),
+        });
+      },
     });
   }
 

packages/shared/src/components/squads/SquadMemberMenu.tsx

@@ -18,6 +18,8 @@ import { ContextMenu as ContextMenuIds } from '../../hooks/constants';
 import { LazyModal } from '../modals/common/types';
 import { GiftIcon } from '../icons/gift';
 import { useLazyModal } from '../../hooks/useLazyModal';
+import { LogEvent, TargetId, TargetType } from '../../lib/log';
+import { useLogContext } from '../../contexts/LogContext';
 
 interface SquadMemberMenuProps extends Pick<UseSquadActions, 'onUpdateRole'> {
   squad: Squad;
@@ -127,6 +129,7 @@ export default function SquadMemberMenu({
   const { user } = useContext(AuthContext);
   const { showPrompt } = usePrompt();
   const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
   const onUpdateMember = async (
     role: SourceMemberRole,
     title: MenuItemTitle,
@@ -216,11 +219,17 @@ export default function SquadMemberMenu({
     if (!member.user.isPlus) {
       menu.push({
         label: 'Gift daily.dev Plus',
-        action: () =>
+        action: () => {
+          logEvent({
+            event_name: LogEvent.GiftSubscription,
+            target_id: TargetId.Squad,
+            target_type: TargetType.Plus,
+          });
           openModal({
             type: LazyModal.GiftPlus,
             props: { preselected: member.user },
-          }),
+          });
+        },
         icon: <GiftIcon />,
       });
     }

packages/shared/src/lib/log.ts

@@ -226,6 +226,7 @@ export enum LogEvent {
   ReceivePayment = 'receive payment',
   OnboardingSkipPlus = 'skip upgrade subscription',
   OnboardingUpgradePlus = 'upgrade subscription',
+  GiftSubscription = 'gift subscription',
   // End Plus subscription
   // Clickbait Shield
   ToggleClickbaitShield = 'toggle clickbait shield',
@@ -308,6 +309,7 @@ export enum TargetId {
   Ads = 'ads',
   MyProfile = 'my profile',
   PlusBadge = 'plus badge',
+  PlusPage = 'plus page',
   Onboarding = 'onboarding',
   BlockedWords = 'block words',
   CustomFeed = 'custom feed',
@@ -316,6 +318,7 @@ export enum TargetId {
   ClickbaitShield = 'clickbait shield',
   StreakTimezoneLabel = 'streak timezone label',
   StreakTimezoneMismatchPrompt = 'streak timezone mismatch prompt',
+  ContextMenu = 'context',
 }
 
 export enum NotificationChannel {

packages/webapp/pages/account/invite.tsx

@@ -128,11 +128,16 @@ const AccountInvitePage = (): ReactElement => {
           icon={<GiftIcon size={IconSize.Small} secondary />}
           variant={ButtonVariant.Secondary}
           color={ButtonColor.Bacon}
-          onClick={() =>
+          onClick={() => {
+            logEvent({
+              event_name: LogEvent.GiftSubscription,
+              target_id: TargetId.InviteFriendsPage,
+              target_type: TargetType.Plus,
+            });
             openModal({
               type: LazyModal.GiftPlus,
-            })
-          }
+            });
+          }}
           className="max-w-fit border-action-plus-default text-action-plus-default"
         >
           Buy as gift