fix: [IOBP-1101] Add missing Mixpanel events/properties (#6581)

## Short description This PR focus on enhancing the tracking of payment methods, receipt details, and user interactions adding missing events/properties to `Mixpanel`. ## List of changes proposed in this pull request - Added `trackPaymentWalletMethodDetail` function to track details of payment methods - Updated `handleOnMethodPress` function to include tracking of payment method selection and status - Added `organization_fiscal_code` and `payment_status` to the `trackPaymentsOpenReceipt` function - `trackPaymentsSaveAndShareReceipt` to include additional receipt details - Added `trackReceiptFilterUsage` function to track the usage of receipt category filters - Added tracking for receipt filter usage in `ReceiptListScreen` - Updated `ReceiptDetailsScreen` and `ReceiptPreviewScreen` to include more comprehensive analytics tracking when downloading and sharing receipts ## How to test Verify with `Proxyman` that all data is being transmitted as specified in the open task description --------- Co-authored-by: Alessandro <[email protected]>
pagopa · Jan 15, 2025 · ea95f85 · ea95f85
1 parent b03d94e
commit ea95f85
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 10 deletions.
diff --git a/ts/features/payments/history/store/reducers/index.ts b/ts/features/payments/history/store/reducers/index.ts
@@ -218,6 +218,9 @@ const reducer = (
     case getType(getPaymentsReceiptDetailsAction.success):
       receiptsAnalytics.trackPaymentsOpenReceipt({
         organization_name: action.payload.carts?.[0]?.payee?.name,
+        organization_fiscal_code:
+          state.analyticsData?.verifiedData?.paFiscalCode,
+        payment_status: "paid",
         first_time_opening: state.analyticsData?.receiptFirstTimeOpening,
         user: state.analyticsData?.receiptUser
       });

diff --git a/ts/features/payments/home/analytics/index.ts b/ts/features/payments/home/analytics/index.ts
@@ -12,6 +12,11 @@ export type PaymentHomeAnalyticsProps = {
   add_entry_point: PaymentsAnalyticsHomeAddWalletEntryPoint;
 };
 
+type PaymentMethodAnalyticsProps = {
+  payment_method_selected: string;
+  payment_method_status: "valid" | "invalid";
+};
+
 export const trackPaymentsHome = (
   props: Partial<PaymentHomeAnalyticsProps>
 ) => {
@@ -60,3 +65,14 @@ export const trackPaymentWalletAddStart = (
     })
   );
 };
+
+export const trackPaymentWalletMethodDetail = (
+  props: Partial<PaymentMethodAnalyticsProps>
+) => {
+  void mixpanelTrack(
+    "WALLET_PAYMENT_METHOD_DETAIL",
+    buildEventProperties("UX", "action", {
+      ...props
+    })
+  );
+};
diff --git a/ts/features/payments/home/components/PaymentsHomeUserMethodsList.tsx b/ts/features/payments/home/components/PaymentsHomeUserMethodsList.tsx
@@ -73,7 +73,12 @@ const PaymentsHomeUserMethodsList = ({ enforcedLoadingState }: Props) => {
     }
   }, [dispatch, paymentMethodsPot]);
 
-  const handleOnMethodPress = (walletId: string) => () => {
+  const handleOnMethodPress = (walletId: string, isExpired: boolean) => () => {
+    analytics.trackPaymentWalletMethodDetail({
+      payment_method_selected: paymentAnalyticsData?.selectedPaymentMethod,
+      payment_method_status: isExpired ? "invalid" : "valid"
+    });
+
     navigation.navigate(
       PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR,
       {
@@ -107,7 +112,10 @@ const PaymentsHomeUserMethodsList = ({ enforcedLoadingState }: Props) => {
   const userMethods = paymentMethods.map(
     (method: WalletInfo): PaymentCardSmallProps => ({
       ...getPaymentCardPropsFromWalletInfo(method),
-      onPress: handleOnMethodPress(method.walletId)
+      onPress: handleOnMethodPress(
+        method.walletId,
+        getPaymentCardPropsFromWalletInfo(method)?.isExpired ?? false
+      )
     })
   );
 

diff --git a/ts/features/payments/receipts/analytics/index.ts b/ts/features/payments/receipts/analytics/index.ts
@@ -1,12 +1,14 @@
 import { mixpanelTrack } from "../../../../mixpanel";
 import { buildEventProperties } from "../../../../utils/analytics";
 import { PaymentsAnalyticsReceiptUser } from "../../common/types/PaymentAnalytics";
+import { ReceiptsCategoryFilter } from "../types";
 
 export type PaymentReceiptAnalyticsProps = {
   organization_name: string;
   payment_status: string;
   first_time_opening: boolean;
   user: PaymentsAnalyticsReceiptUser;
+  organization_fiscal_code: string;
 };
 
 export const trackPaymentsReceiptListing = () => {
@@ -33,7 +35,8 @@ export const trackPaymentsOpenReceipt = (
   void mixpanelTrack(
     "OPEN_RECEIPT",
     buildEventProperties("UX", "screen_view", {
-      ...props
+      ...props,
+      receipt_entry_point: "payments_receipt_listing"
     })
   );
 };
@@ -56,10 +59,13 @@ export const trackPaymentsOpenSubReceipt = () => {
   );
 };
 
-export const trackPaymentsSaveAndShareReceipt = () => {
+export const trackPaymentsSaveAndShareReceipt = (
+  props: Partial<PaymentReceiptAnalyticsProps>
+) => {
   void mixpanelTrack(
     "SAVE_AND_SHARE_RECEIPT",
     buildEventProperties("UX", "action", {
+      ...props,
       receipt_entry_point: "payments_receipt_listing"
     })
   );
@@ -111,3 +117,12 @@ export const trackHideReceiptFailure = (
     buildEventProperties("KO", undefined, props)
   );
 };
+
+export const trackReceiptFilterUsage = (
+  filter: Partial<ReceiptsCategoryFilter>
+) => {
+  void mixpanelTrack(
+    "PAYMENTS_RECEIPT_LISTING_FILTER",
+    buildEventProperties("UX", "action", { filter })
+  );
+};
diff --git a/ts/features/payments/receipts/components/HideReceiptButton.tsx b/ts/features/payments/receipts/components/HideReceiptButton.tsx
@@ -4,10 +4,10 @@ import { Alert, View } from "react-native";
 import { useDispatch } from "react-redux";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
-import * as analytics from "../analytics";
-import { hidePaymentsReceiptAction } from "../store/actions";
 import { useIOSelector } from "../../../../store/hooks";
 import { paymentAnalyticsDataSelector } from "../../history/store/selectors";
+import * as analytics from "../analytics";
+import { hidePaymentsReceiptAction } from "../store/actions";
 
 type Props = {
   transactionId: string;
@@ -23,15 +23,21 @@ const HideReceiptButton = (props: Props) => {
     analytics.trackHideReceipt({
       organization_name: paymentAnalyticsData?.receiptOrganizationName,
       first_time_opening: paymentAnalyticsData?.receiptFirstTimeOpening,
-      user: paymentAnalyticsData?.receiptUser
+      user: paymentAnalyticsData?.receiptUser,
+      organization_fiscal_code:
+        paymentAnalyticsData?.verifiedData?.paFiscalCode,
+      payment_status: "paid"
     });
   };
 
   const analyticsHideReceiptConfirmAction = () => {
     analytics.trackHideReceiptConfirm({
       organization_name: paymentAnalyticsData?.receiptOrganizationName,
       first_time_opening: paymentAnalyticsData?.receiptFirstTimeOpening,
-      user: paymentAnalyticsData?.receiptUser
+      user: paymentAnalyticsData?.receiptUser,
+      organization_fiscal_code:
+        paymentAnalyticsData?.verifiedData?.paFiscalCode,
+      payment_status: "paid"
     });
   };
 

diff --git a/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx b/ts/features/payments/receipts/screens/ReceiptDetailsScreen.tsx
@@ -108,8 +108,11 @@ const ReceiptDetailsScreen = () => {
   const handleDownloadPdfReceipt = () => {
     analytics.trackPaymentsDownloadReceiptAction({
       organization_name: paymentAnalyticsData?.receiptOrganizationName,
+      organization_fiscal_code:
+        paymentAnalyticsData?.verifiedData?.paFiscalCode,
       first_time_opening: paymentAnalyticsData?.receiptFirstTimeOpening,
-      user: paymentAnalyticsData?.receiptUser
+      user: paymentAnalyticsData?.receiptUser,
+      payment_status: "paid"
     });
     dispatch(
       getPaymentsReceiptDownloadAction.request({

diff --git a/ts/features/payments/receipts/screens/ReceiptListScreen.tsx b/ts/features/payments/receipts/screens/ReceiptListScreen.tsx
@@ -124,6 +124,7 @@ const ReceiptListScreen = () => {
   const handleCategorySelected = React.useCallback(
     (category: ReceiptsCategoryFilter) => {
       setNoticeCategory(category);
+      analytics.trackReceiptFilterUsage(category);
       dispatch(
         getPaymentsReceiptAction.request({
           firstLoad: true,

diff --git a/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx b/ts/features/payments/receipts/screens/ReceiptPreviewScreen.tsx
@@ -18,6 +18,7 @@ import {
   FooterActionsMeasurements
 } from "../../../../components/ui/FooterActions";
 import * as analytics from "../analytics";
+import { paymentAnalyticsDataSelector } from "../../history/store/selectors";
 
 export type ReceiptPreviewScreenProps = RouteProp<
   PaymentsReceiptParamsList,
@@ -32,6 +33,7 @@ const ReceiptPreviewScreen = () => {
     });
 
   const transactionReceiptPot = useIOSelector(walletReceiptPotSelector);
+  const paymentAnalyticsData = useIOSelector(paymentAnalyticsDataSelector);
 
   useHeaderSecondLevel({
     title: "",
@@ -43,7 +45,12 @@ const ReceiptPreviewScreen = () => {
     if (!transactionReceiptFileInfo) {
       return;
     }
-    analytics.trackPaymentsSaveAndShareReceipt();
+    analytics.trackPaymentsSaveAndShareReceipt({
+      payment_status: "paid",
+      organization_name: paymentAnalyticsData?.receiptOrganizationName,
+      first_time_opening: paymentAnalyticsData?.receiptFirstTimeOpening,
+      user: paymentAnalyticsData?.receiptUser
+    });
     // The file name is normalized to remove the .pdf extension on Android devices since it's added by default to the Share module
     const normalizedFilename =
       Platform.OS === "ios"