-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: [IOBP-1044,IOBP-1054] Add missing outcome screen into payment …
…onboarding (#6514) ## Short description This PR adds two missing outcome screens into payment onboarding flow. ## List of changes proposed in this pull request - Mapped outcome `PSP_ERROR_ONBOARDING` and `BE_KO` inside the payment method onboarding flow; - Handled the onboarding outcomes inside the `usePaymentFailureSupportModal` hook; - Refactored the `trackAddOnboardingPaymentMethod` function to keep track of the analytics onboarding outcomes; ## How to test - Checkout this dev-server PR: pagopa/io-dev-api-server#444; - Start the payment onboarding flow from the wallet screen; - When you reach the in-app browser with the dropdown selection, choose `PSP_ERROR_ONBOARDING` or `BE_KO` and check that you see the correct screen; ## Preview |PSP_ERROR_ONBOARDING|BE_KO| |-|-| |<img src="https://github.com/user-attachments/assets/b148cc63-cdd0-46dd-a7eb-3891c69c940e" width="350"/>|<img src="https://github.com/user-attachments/assets/bbaa3eea-76f2-4a21-9f93-e7d4414f9538" width="350"/>|
- Loading branch information
Showing
8 changed files
with
430 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
130 changes: 130 additions & 0 deletions
130
ts/features/payments/onboarding/analytics/__tests__/index.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import { mixpanelTrack } from "../../../../../mixpanel"; | ||
| import { | ||
| getOnboardingPaymentMethodOutcomeEvent, | ||
| trackAddOnboardingPaymentMethod, | ||
| trackPaymentOnboardingErrorHelp | ||
| } from "../../analytics"; | ||
| import { WalletOnboardingOutcomeEnum } from "../../types/OnboardingOutcomeEnum"; | ||
|
|
||
| jest.mock("../../../../../mixpanel", () => ({ | ||
| mixpanelTrack: jest.fn() | ||
| })); | ||
|
|
||
| jest.mock("../../../../../utils/analytics", () => ({ | ||
| buildEventProperties: jest.fn().mockImplementation((source, type, props) => ({ | ||
| source, | ||
| type, | ||
| ...props | ||
| })) | ||
| })); | ||
|
|
||
| describe("Onboarding Analytics", () => { | ||
| describe("getOnboardingPaymentMethodOutcomeEvent", () => { | ||
| it.each([ | ||
| [WalletOnboardingOutcomeEnum.SUCCESS, "ADD_PAYMENT_METHOD_UX_SUCCESS"], | ||
| [ | ||
| WalletOnboardingOutcomeEnum.AUTH_ERROR, | ||
| "PAYMENT_ADD_METHOD_AUTHORIZATION_DENIED" | ||
| ], | ||
| [ | ||
| WalletOnboardingOutcomeEnum.CANCELED_BY_USER, | ||
| "PAYMENT_ADD_METHOD_CANCELED_BY_USER" | ||
| ], | ||
| [ | ||
| WalletOnboardingOutcomeEnum.ALREADY_ONBOARDED, | ||
| "PAYMENT_ADD_METHOD_DUPLICATE_ERROR" | ||
| ], | ||
| [WalletOnboardingOutcomeEnum.BE_KO, "PAYMENT_99_ERROR"], | ||
| [ | ||
| WalletOnboardingOutcomeEnum.BPAY_NOT_FOUND, | ||
| "PAYMENT_ADD_METHOD_BPAY_NOT_FOUND" | ||
| ], | ||
| [ | ||
| WalletOnboardingOutcomeEnum.PSP_ERROR_ONBOARDING, | ||
| "PAYMENT_ADD_METHOD_PSP_ERROR" | ||
| ], | ||
| [WalletOnboardingOutcomeEnum.INVALID_SESSION, "PAYMENT_SESSION_TIMEOUT"], | ||
| [WalletOnboardingOutcomeEnum.TIMEOUT, "PAYMENT_SESSION_TIMEOUT"], | ||
| [WalletOnboardingOutcomeEnum.GENERIC_ERROR, "PAYMENT_GENERIC_ERROR"], | ||
| ["UNKNOWN_OUTCOME", "PAYMENT_GENERIC_ERROR"] | ||
| ])( | ||
| "returns correct event name for outcome %s", | ||
| (outcome, expectedEventName) => { | ||
| const eventName = getOnboardingPaymentMethodOutcomeEvent( | ||
| outcome as WalletOnboardingOutcomeEnum | ||
| ); | ||
| expect(eventName).toBe(expectedEventName); | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| describe("trackAddOnboardingPaymentMethod", () => { | ||
| it("tracks the correct event with provided outcome and payment method", () => { | ||
| trackAddOnboardingPaymentMethod( | ||
| WalletOnboardingOutcomeEnum.SUCCESS, | ||
| "CreditCard" | ||
| ); | ||
|
|
||
| expect(mixpanelTrack).toHaveBeenCalledWith( | ||
| "ADD_PAYMENT_METHOD_UX_SUCCESS", | ||
| expect.objectContaining({ | ||
| source: "UX", | ||
| type: "screen_view", | ||
| payment_method_selected: "CreditCard", | ||
| payment_phase: "onboarding" | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| it("handles undefined payment method gracefully", () => { | ||
| trackAddOnboardingPaymentMethod( | ||
| WalletOnboardingOutcomeEnum.AUTH_ERROR, | ||
| undefined | ||
| ); | ||
|
|
||
| expect(mixpanelTrack).toHaveBeenCalledWith( | ||
| "PAYMENT_ADD_METHOD_AUTHORIZATION_DENIED", | ||
| expect.objectContaining({ | ||
| source: "UX", | ||
| type: "screen_view", | ||
| payment_method_selected: undefined, | ||
| payment_phase: "onboarding" | ||
| }) | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe("trackPaymentOnboardingErrorHelp", () => { | ||
| it("tracks the correct event with error and additional props", () => { | ||
| trackPaymentOnboardingErrorHelp({ | ||
| error: "PAYMENT_ERROR", | ||
| payment_method_selected: "CreditCard" | ||
| }); | ||
|
|
||
| expect(mixpanelTrack).toHaveBeenCalledWith( | ||
| "PAYMENT_ERROR_HELP", | ||
| expect.objectContaining({ | ||
| source: "UX", | ||
| type: "action", | ||
| payment_phase: "onboarding", | ||
| error: "PAYMENT_ERROR", | ||
| payment_method_selected: "CreditCard" | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| it("handles missing optional properties gracefully", () => { | ||
| trackPaymentOnboardingErrorHelp({ error: "PAYMENT_ERROR" }); | ||
|
|
||
| expect(mixpanelTrack).toHaveBeenCalledWith( | ||
| "PAYMENT_ERROR_HELP", | ||
| expect.objectContaining({ | ||
| source: "UX", | ||
| type: "action", | ||
| payment_phase: "onboarding", | ||
| error: "PAYMENT_ERROR" | ||
| }) | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.