chore: [IOBP-1028] Mixpanel tracking onboarding card methods events o…

…n failure (#6465)

## Short description
This pull request primarily focus on adding new analytics tracking
functions to mixpanel when the onboarding payment methods is failing.

## List of changes proposed in this pull request
- Added new functions to track various onboarding payment method events,
including authorization denied, user cancellation, duplicate error, and
3DS error
- Updated the component to use a switch statement for handling different
onboarding outcomes and tracking the corresponding analytics events

## How to test
- Try to onboard a payment method
- Try each of these outcomes: `AUTH_ERROR`, `CANCELLED_BY_USER` and
`ALREADY_ONBOARDED`
- Check that data are sent correctly to mixpanel

ts/features/payments/onboarding/analytics/index.ts

@@ -1,15 +1,81 @@
 import { mixpanelTrack } from "../../../../mixpanel";
 import { buildEventProperties } from "../../../../utils/analytics";
+import { WalletOnboardingOutcomeEnum } from "../types/OnboardingOutcomeEnum";
 
 export type PaymentOnboardingAnalyticsProps = {
   payment_method_selected: string;
 };
 
-export const trackSuccessOnboardingPaymentMethod = (
+const trackSuccessOnboardingPaymentMethod = (
   props: Partial<PaymentOnboardingAnalyticsProps>
 ) => {
   void mixpanelTrack(
     "ADD_PAYMENT_METHOD_UX_SUCCESS",
     buildEventProperties("UX", "screen_view", props)
   );
 };
+
+const trackOnboardingPaymentMethodDenied = (
+  props: Partial<PaymentOnboardingAnalyticsProps>
+) => {
+  void mixpanelTrack(
+    "PAYMENT_ADD_METHOD_AUTHORIZATION_DENIED",
+    buildEventProperties("UX", "screen_view", props)
+  );
+};
+
+const trackAddOnboardingPaymentMethodCanceled = (
+  props: Partial<PaymentOnboardingAnalyticsProps>
+) => {
+  void mixpanelTrack(
+    "PAYMENT_ADD_METHOD_CANCELED_BY_USER",
+    buildEventProperties("UX", "screen_view", props)
+  );
+};
+
+const trackAddOnboardingPaymentMethodDuplicated = (
+  props: Partial<PaymentOnboardingAnalyticsProps>
+) => {
+  void mixpanelTrack(
+    "PAYMENT_ADD_METHOD_DUPLICATE_ERROR",
+    buildEventProperties("UX", "screen_view", props)
+  );
+};
+
+// This function will be used in the future when we will have 3DS
+// const trackOnboardingPaymentMethod3dsError = (
+//   props: Partial<PaymentOnboardingAnalyticsProps>
+// ) => {
+//   void mixpanelTrack(
+//     "PAYMENT_ADD_METHOD_3DS_ERROR",
+//     buildEventProperties("UX", "screen_view", props)
+//   );
+// };
+
+export const trackAddOnboardingPaymentMethod = (
+  outcome: WalletOnboardingOutcomeEnum,
+  payment_method_selected: string | undefined
+) => {
+  switch (outcome) {
+    case WalletOnboardingOutcomeEnum.SUCCESS:
+      trackSuccessOnboardingPaymentMethod({
+        payment_method_selected
+      });
+      break;
+    case WalletOnboardingOutcomeEnum.AUTH_ERROR:
+      trackOnboardingPaymentMethodDenied({
+        payment_method_selected
+      });
+      break;
+    case WalletOnboardingOutcomeEnum.CANCELED_BY_USER:
+      trackAddOnboardingPaymentMethodCanceled({
+        payment_method_selected
+      });
+      break;
+    case WalletOnboardingOutcomeEnum.ALREADY_ONBOARDED:
+      trackAddOnboardingPaymentMethodDuplicated({
+        payment_method_selected
+      });
+      break;
+  }
+};

ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx

@@ -1,9 +1,9 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { IOPictograms } from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
 import { pipe } from "fp-ts/lib/function";
-import * as React from "react";
 import * as O from "fp-ts/lib/Option";
+import * as React from "react";
 import { View } from "react-native";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
@@ -13,24 +13,24 @@ import {
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
 import ROUTES from "../../../../navigation/routes";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
 import { PaymentsMethodDetailsRoutes } from "../../details/navigation/routes";
+import { getPaymentsWalletUserMethods } from "../../wallet/store/actions";
+import * as analytics from "../analytics";
+import { usePaymentOnboardingAuthErrorBottomSheet } from "../components/PaymentsOnboardingAuthErrorBottomSheet";
 import { PaymentsOnboardingParamsList } from "../navigation/params";
-import {
-  WalletOnboardingOutcome,
-  WalletOnboardingOutcomeEnum
-} from "../types/OnboardingOutcomeEnum";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { paymentsResetRptIdToResume } from "../store/actions";
 import {
   selectPaymentOnboardingMethods,
   selectPaymentOnboardingRptIdToResume,
   selectPaymentOnboardingSelectedMethod
 } from "../store/selectors";
-import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
-import { paymentsResetRptIdToResume } from "../store/actions";
-import { getPaymentsWalletUserMethods } from "../../wallet/store/actions";
-import { usePaymentOnboardingAuthErrorBottomSheet } from "../components/PaymentsOnboardingAuthErrorBottomSheet";
-import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import * as analytics from "../analytics";
+import {
+  WalletOnboardingOutcome,
+  WalletOnboardingOutcomeEnum
+} from "../types/OnboardingOutcomeEnum";
 
 export type PaymentsOnboardingFeedbackScreenParams = {
   outcome: WalletOnboardingOutcome;
@@ -77,11 +77,8 @@ const PaymentsOnboardingFeedbackScreen = () => {
     const payment_method_selected = availablePaymentMethods?.find(
       paymentMethod => paymentMethod.id === selectedPaymentMethodId
     )?.name;
-    if (outcome === WalletOnboardingOutcomeEnum.SUCCESS) {
-      analytics.trackSuccessOnboardingPaymentMethod({
-        payment_method_selected
-      });
-    }
+
+    analytics.trackAddOnboardingPaymentMethod(outcome, payment_method_selected);
   });
 
   React.useEffect(