feat: analytics events for credits/awards (#4291)

Author: rebelchris

packages/shared/src/components/award/AwardButton.tsx

@@ -20,12 +20,14 @@ import type {
 } from '../../contexts/GiveAwardModalContext';
 import { useRequestProtocol } from '../../hooks/useRequestProtocol';
 import { getCompanionWrapper } from '../../lib/extension';
+import type { Post } from '../../graphql/posts';
 
 type AwardButtonProps = {
   appendTo?: 'parent' | Element | ((ref: Element) => Element);
   type: AwardTypes;
   className?: string;
   entity: AwardEntity;
+  post?: Post;
 } & Pick<ButtonProps<'button'>, 'pressed' | 'variant'>;
 export const AwardButton = ({
   appendTo: appendToProps,
@@ -34,6 +36,7 @@ export const AwardButton = ({
   entity,
   pressed,
   variant = ButtonVariant.Tertiary,
+  post,
 }: AwardButtonProps): ReactElement => {
   const { isCompanion } = useRequestProtocol();
   const { user, showLogin } = useAuthContext();
@@ -49,6 +52,7 @@ export const AwardButton = ({
       props: {
         type,
         entity,
+        post,
       },
     });
   };

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

@@ -365,6 +365,7 @@ export default function CommentActionButtons({
           numAwards: comment.numAwards,
         }}
         pressed={!!comment.userState?.awarded}
+        post={post}
       />
       {!!comment.numAwards && (
         <Typography

packages/shared/src/components/cores/CoreOptionButton.tsx

@@ -10,6 +10,8 @@ import {
   TypographyColor,
   TypographyType,
 } from '../typography/Typography';
+import { LogEvent } from '../../lib/log';
+import { useLogContext } from '../../contexts/LogContext';
 
 type CoreOptionButtonProps = {
   id: string;
@@ -18,14 +20,20 @@ export const CoreOptionButton = ({
   id,
 }: CoreOptionButtonProps): ReactElement => {
   const isMobile = useViewSize(ViewSize.MobileL);
-  const { selectedProduct, setSelectedProduct, openCheckout } =
+  const { logEvent } = useLogContext();
+  const { selectedProduct, setSelectedProduct, openCheckout, origin } =
     useBuyCoresContext();
   const onSelect = useCallback(() => {
+    // TODO: Amount should be deducted from selected product entity
+    logEvent({
+      event_name: LogEvent.SelectCreditsQuantity,
+      extra: JSON.stringify({ origin, amount: id }),
+    });
     setSelectedProduct(id);
     if (!isMobile) {
       openCheckout({ priceId: id });
     }
-  }, [id, isMobile, openCheckout, setSelectedProduct]);
+  }, [id, isMobile, logEvent, openCheckout, origin, setSelectedProduct]);
   return (
     <Button
       className={classNames(

packages/shared/src/components/credit/BuyCreditsButton.tsx

@@ -7,6 +7,8 @@ import Link from '../utilities/Link';
 import { webappUrl } from '../../lib/constants';
 import { anchorDefaultRel } from '../../lib/strings';
 import { isIOSNative } from '../../lib/func';
+import { LogEvent, Origin } from '../../lib/log';
+import { useLogContext } from '../../contexts/LogContext';
 
 type BuyCreditsButtonProps = {
   onPlusClick: () => void;
@@ -17,6 +19,15 @@ export const BuyCreditsButton = ({
   hideBuyButton,
 }: BuyCreditsButtonProps): ReactElement => {
   const renderBuyButton = !isIOSNative() && !hideBuyButton;
+  const { logEvent } = useLogContext();
+  const trackBuyCredits = () => {
+    logEvent({
+      event_name: LogEvent.StartBuyingCredits,
+      extra: JSON.stringify({ origin: Origin.Award }),
+    });
+    onPlusClick();
+  };
+
   return (
     <div className="flex items-center rounded-10 bg-surface-float">
       <Link href={`${webappUrl}/earnings`} passHref>
@@ -38,7 +49,7 @@ export const BuyCreditsButton = ({
             variant={ButtonVariant.Tertiary}
             icon={<PlusIcon />}
             size={ButtonSize.Small}
-            onClick={onPlusClick}
+            onClick={trackBuyCredits}
           />
         </>
       ) : null}

packages/shared/src/components/modals/award/BuyCoresModal.tsx

@@ -24,6 +24,7 @@ import { IconSize } from '../../Icon';
 import useDebounceFn from '../../../hooks/useDebounceFn';
 import { CoreOptionList } from '../../cores/CoreOptionList';
 import { CoreAmountNeeded } from '../../cores/CoreAmountNeeded';
+import type { Origin } from '../../../lib/log';
 
 const CoreOptions = () => {
   return (
@@ -182,14 +183,20 @@ const ModalRender = ({ ...props }: ModalProps) => {
 };
 
 type BuyCoresModalProps = ModalProps & {
+  origin: Origin;
   onCompletion?: () => void;
 };
 export const BuyCoresModal = ({
+  origin,
   onCompletion,
   ...props
 }: BuyCoresModalProps): ReactElement => {
   return (
-    <BuyCoresContextProvider amountNeeded={40} onCompletion={onCompletion}>
+    <BuyCoresContextProvider
+      amountNeeded={40}
+      onCompletion={onCompletion}
+      origin={origin}
+    >
       <ModalRender {...props} />
     </BuyCoresContextProvider>
   );

packages/shared/src/components/modals/award/GiveAwardModal.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import { useMutation, useQuery } from '@tanstack/react-query';
@@ -38,15 +38,22 @@ import { labels } from '../../../lib';
 import type { ApiErrorResult } from '../../../graphql/common';
 import { generateQueryKey, RequestKey } from '../../../lib/query';
 import { useAuthContext } from '../../../contexts/AuthContext';
+import { Origin } from '../../../lib/log';
+import type { Post } from '../../../graphql/posts';
 
 const AwardItem = ({ item }: { item: Product }) => {
-  const { setActiveStep } = useGiveAwardModalContext();
+  const { setActiveStep, logAwardEvent } = useGiveAwardModalContext();
+
+  const onClick = useCallback(() => {
+    logAwardEvent({ awardEvent: 'PICK', extra: { award: item.value } });
+    setActiveStep({ screen: 'COMMENT', product: item });
+  }, [item, logAwardEvent, setActiveStep]);
 
   return (
     <Button
       variant={ButtonVariant.Float}
       className="flex !h-auto flex-col items-center justify-center gap-2 rounded-14 bg-surface-float !p-1"
-      onClick={() => setActiveStep({ screen: 'COMMENT', product: item })}
+      onClick={onClick}
     >
       <Image src={item.image} alt={item.name} className="size-20" />
       <div className="flex items-center justify-center">
@@ -133,8 +140,14 @@ const IntroScreen = () => {
 
 const CommentScreen = () => {
   const { updateUser, user } = useAuthContext();
-  const { setActiveStep, type, entity, product, onRequestClose } =
-    useGiveAwardModalContext();
+  const {
+    setActiveStep,
+    type,
+    entity,
+    product,
+    onRequestClose,
+    logAwardEvent,
+  } = useGiveAwardModalContext();
   const isMobile = useViewSize(ViewSize.MobileL);
   const { displayToast } = useToastNotification();
   const [note, setNote] = useState('');
@@ -163,6 +176,24 @@ const CommentScreen = () => {
     },
   });
 
+  const onAwardClick = useCallback(() => {
+    logAwardEvent({ awardEvent: 'AWARD', extra: { award: product.value } });
+    awardMutation({
+      productId: product.id,
+      type,
+      entityId: entity.id,
+      note,
+    });
+  }, [
+    awardMutation,
+    entity.id,
+    logAwardEvent,
+    note,
+    product.id,
+    product.value,
+    type,
+  ]);
+
   return (
     <>
       <Modal.Header title="Give an Award" showCloseButton={!isMobile}>
@@ -223,14 +254,7 @@ const CommentScreen = () => {
           loading={isPending}
           className="w-full"
           variant={ButtonVariant.Primary}
-          onClick={() => {
-            awardMutation({
-              productId: product.id,
-              type,
-              entityId: entity.id,
-              note,
-            });
-          }}
+          onClick={onAwardClick}
         >
           Send Award for <CoinIcon />{' '}
           {product.value === 0 ? 'Free' : product.value}
@@ -269,7 +293,15 @@ const ModalBody = () => {
 
 const ModalRender = ({ ...props }: ModalProps) => {
   const isMobile = useViewSize(ViewSize.MobileL);
-  const { activeModal, setActiveModal } = useGiveAwardModalContext();
+  const { activeModal, setActiveModal, logAwardEvent } =
+    useGiveAwardModalContext();
+  const trackingRef = useRef(false);
+  useEffect(() => {
+    if (!trackingRef.current) {
+      trackingRef.current = true;
+      logAwardEvent({ awardEvent: 'START' });
+    }
+  }, [logAwardEvent]);
 
   const onCompletion = useCallback(() => {
     setActiveModal('AWARD');
@@ -288,7 +320,11 @@ const ModalRender = ({ ...props }: ModalProps) => {
         </Modal>
       ) : null}
       {activeModal === 'BUY_CORES' ? (
-        <BuyCoresModal {...props} onCompletion={onCompletion} />
+        <BuyCoresModal
+          {...props}
+          onCompletion={onCompletion}
+          origin={Origin.Award}
+        />
       ) : null}
     </>
   );
@@ -297,6 +333,7 @@ const ModalRender = ({ ...props }: ModalProps) => {
 type GiveAwardModalProps = ModalProps & {
   type: AwardTypes;
   entity: AwardEntity;
+  post?: Post;
 };
 const GiveAwardModal = (props: GiveAwardModalProps): ReactElement => {
   return (

packages/shared/src/contexts/BuyCoresContext.tsx

@@ -15,6 +15,7 @@ import {
 import { checkIsExtension } from '../lib/func';
 import type { OpenCheckoutFn } from './payment/context';
 import { useAuthContext } from './AuthContext';
+import type { Origin } from '../lib/log';
 
 const SCREENS = {
   INTRO: 'INTRO',
@@ -32,19 +33,22 @@ export type BuyCoresContextData = {
   setSelectedProduct: (product: string) => void;
   activeStep: Screens;
   setActiveStep: (step: Screens) => void;
+  origin?: Origin;
 };
 
 const BuyCoresContext = React.createContext<BuyCoresContextData>(undefined);
 export default BuyCoresContext;
 
 export type BuyCoresContextProviderProps = {
   children?: ReactNode;
+  origin: Origin;
   amountNeeded?: number;
   onCompletion?: () => void;
 };
 
 export const BuyCoresContextProvider = ({
   onCompletion,
+  origin,
   amountNeeded,
   children,
 }: BuyCoresContextProviderProps): ReactElement => {
@@ -121,12 +125,14 @@ export const BuyCoresContextProvider = ({
       selectedProduct,
       setSelectedProduct,
       openCheckout,
+      origin,
     }),
     [
       activeStep,
       amountNeeded,
       onCompletion,
       openCheckout,
+      origin,
       paddle,
       selectedProduct,
     ],