chore: [IOBP-913] Map correct payment_phase attribute into mixpanel…

… event when generic error shows (#6278) ## Short description This PR fixes the `payment_phase` attribute into mixpanel event when a generic error shows during the payment flow; ## List of changes proposed in this pull request - Set the initial state of the current step of the payment to `NONE` that indicates a step not in the payment flow, such as the `verify` step; - Mapped the `payment_phase` in a correct way to set it to `verifica` if the step is NONE, `attiva` if the step is in pick payment method or pick PSP and `pagamento` if the current step of the payment phase is inside the webview to perform the payment; --------- Co-authored-by: Mario Perrotta <[email protected]>
pagopa · Oct 14, 2024 · bb5d91d · bb5d91d
1 parent 22ddd24
commit bb5d91d
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 11 deletions.
diff --git a/ts/features/payments/checkout/components/WalletPaymentFailureDetail.tsx b/ts/features/payments/checkout/components/WalletPaymentFailureDetail.tsx
@@ -19,6 +19,8 @@ import {
   paymentAnalyticsDataSelector
 } from "../../history/store/selectors";
 import * as analytics from "../analytics";
+import { selectWalletPaymentCurrentStep } from "../store/selectors";
+import { getPaymentPhaseFromStep } from "../utils";
 
 type Props = {
   failure: WalletPaymentFailure;
@@ -30,6 +32,7 @@ const WalletPaymentFailureDetail = ({ failure }: Props) => {
   const paymentOngoingHistory = useIOSelector(selectOngoingPaymentHistory);
   const dispatch = useIODispatch();
   const paymentAnalyticsData = useIOSelector(paymentAnalyticsDataSelector);
+  const currentStep = useIOSelector(selectWalletPaymentCurrentStep);
 
   const handleClose = () => {
     navigation.pop();
@@ -154,7 +157,7 @@ const WalletPaymentFailureDetail = ({ failure }: Props) => {
       data_entry: paymentAnalyticsData?.startOrigin,
       first_time_opening: !paymentAnalyticsData?.attempt ? "yes" : "no",
       expiration_date: paymentAnalyticsData?.verifiedData?.dueDate,
-      payment_phase: "verifica"
+      payment_phase: getPaymentPhaseFromStep(currentStep)
     });
   });
 

diff --git a/.../payments/checkout/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts b/.../payments/checkout/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
@@ -46,11 +46,10 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
+      .select(paymentAnalyticsDataSelector)
       .next(T_SESSION_TOKEN)
       .next(E.right({ status: 200, value: newTransactionResponse }))
-      .select(paymentAnalyticsDataSelector)
       .next()
-      .put(paymentsCreateTransactionAction.success(newTransactionResponse))
       .next()
       .isDone();
   });
@@ -66,9 +65,9 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
+      .select(paymentAnalyticsDataSelector)
       .next(T_SESSION_TOKEN)
       .next(E.right({ status: 400, value: undefined }))
-      .select(paymentAnalyticsDataSelector)
       .next({})
       .next()
       .isDone();
@@ -85,9 +84,9 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
+      .select(paymentAnalyticsDataSelector)
       .next(T_SESSION_TOKEN)
       .next(E.left([]))
-      .select(paymentAnalyticsDataSelector)
       .next({})
       .next()
       .isDone();

diff --git a/ts/features/payments/checkout/saga/networking/handleWalletPaymentCreateTransaction.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentCreateTransaction.ts
@@ -31,6 +31,7 @@ export function* handleWalletPaymentCreateTransaction(
   newTransaction: PaymentClient["newTransactionForIO"],
   action: ActionType<(typeof paymentsCreateTransactionAction)["request"]>
 ) {
+  const paymentAnalyticsData = yield* select(paymentAnalyticsDataSelector);
   try {
     const newTransactionResult = yield* withPaymentsSessionToken(
       newTransaction,
@@ -41,7 +42,6 @@ export function* handleWalletPaymentCreateTransaction(
       "pagoPAPlatformSessionToken"
     );
 
-    const paymentAnalyticsData = yield* select(paymentAnalyticsDataSelector);
     if (E.isLeft(newTransactionResult)) {
       handleError(paymentAnalyticsData, action.payload.onError);
       yield* put(
@@ -73,13 +73,15 @@ export function* handleWalletPaymentCreateTransaction(
       );
     } else if (status !== 401) {
       // The 401 status is handled by the withPaymentsSessionToken
+      handleError(paymentAnalyticsData, action.payload.onError);
       yield* put(
         paymentsCreateTransactionAction.failure(
           newTransactionResult.right.value
         )
       );
     }
   } catch (e) {
+    handleError(paymentAnalyticsData, action.payload.onError);
     yield* put(
       paymentsCreateTransactionAction.failure({ ...getNetworkError(e) })
     );

diff --git a/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx
@@ -62,6 +62,8 @@ import { paymentAnalyticsDataSelector } from "../../history/store/selectors";
 import { paymentsInitOnboardingWithRptIdToResume } from "../../onboarding/store/actions";
 import { WalletPaymentOutcomeEnum } from "../types/PaymentOutcomeEnum";
 import { walletPaymentEnabledUserWalletsSelector } from "../store/selectors/paymentMethods";
+import { WalletPaymentStepEnum } from "../types";
+import { walletPaymentSetCurrentStep } from "../store/actions/orchestration";
 
 type WalletPaymentDetailScreenNavigationParams = {
   rptId: RptId;
@@ -184,6 +186,11 @@ const WalletPaymentDetailContent = ({
       paymentsGetPaymentUserMethodsAction.request({
         onResponse: wallets => {
           if (!wallets || wallets?.length > 0) {
+            dispatch(
+              walletPaymentSetCurrentStep(
+                WalletPaymentStepEnum.PICK_PAYMENT_METHOD
+              )
+            );
             navigation.navigate(
               PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR,
               {

diff --git a/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx
@@ -34,12 +34,16 @@ import {
 } from "../../history/store/selectors";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { getPaymentPhaseFromStep } from "../utils";
-import { paymentCompletedSuccess } from "../store/actions/orchestration";
+import {
+  paymentCompletedSuccess,
+  walletPaymentSetCurrentStep
+} from "../store/actions/orchestration";
 import { walletPaymentSelectedPspSelector } from "../store/selectors/psps";
 import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import { getPaymentsLatestBizEventsTransactionsAction } from "../../bizEventsTransaction/store/actions";
 import { usePaymentReversedInfoBottomSheet } from "../hooks/usePaymentReversedInfoBottomSheet";
+import { WalletPaymentStepEnum } from "../types";
 
 type WalletPaymentOutcomeScreenNavigationParams = {
   outcome: WalletPaymentOutcome;
@@ -198,6 +202,9 @@ const WalletPaymentOutcomeScreen = () => {
           first_time_opening: !paymentOngoingHistory?.attempt ? "yes" : "no",
           expiration_date: paymentAnalyticsData?.verifiedData?.dueDate
         });
+        dispatch(
+          walletPaymentSetCurrentStep(WalletPaymentStepEnum.PICK_PAYMENT_METHOD)
+        );
         navigation.replace(
           PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR,
           {

diff --git a/ts/features/payments/checkout/store/__tests__/store.test.ts b/ts/features/payments/checkout/store/__tests__/store.test.ts
@@ -7,7 +7,7 @@ import { walletPaymentSetCurrentStep } from "../actions/orchestration";
 import { PaymentsCheckoutState } from "../reducers";
 
 const INITIAL_STATE: PaymentsCheckoutState = {
-  currentStep: 1,
+  currentStep: 0,
   paymentDetails: pot.none,
   userWallets: pot.none,
   allPaymentMethods: pot.none,

diff --git a/ts/features/payments/checkout/store/reducers/index.ts b/ts/features/payments/checkout/store/reducers/index.ts
@@ -57,7 +57,7 @@ export type PaymentsCheckoutState = {
 };
 
 const INITIAL_STATE: PaymentsCheckoutState = {
-  currentStep: WalletPaymentStepEnum.PICK_PAYMENT_METHOD,
+  currentStep: WalletPaymentStepEnum.NONE,
   paymentDetails: pot.none,
   userWallets: pot.none,
   recentUsedPaymentMethod: pot.none,

diff --git a/ts/features/payments/checkout/utils/index.ts b/ts/features/payments/checkout/utils/index.ts
@@ -52,13 +52,13 @@ export const getPaymentPhaseFromStep = (
 ): PaymentAnalyticsPhase => {
   switch (step) {
     case WalletPaymentStepEnum.PICK_PAYMENT_METHOD:
-      return "verifica";
+      return "attiva";
     case WalletPaymentStepEnum.PICK_PSP:
       return "attiva";
     case WalletPaymentStepEnum.CONFIRM_TRANSACTION:
       return "pagamento";
     default:
-      return "pagamento";
+      return "verifica";
   }
 };