[SIW-1953] Mixpanel tracking of new ITWallet feature

scripts/generate-api-models.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 IO_BACKEND_VERSION=v16.4.0-RELEASE
-IO_SERVICES_METADATA_VERSION=1.0.54
+IO_SERVICES_METADATA_VERSION=1.0.56
 
 declare -a apis=(
   # Backend APIs

ts/features/itwallet/analytics/enum.ts

@@ -46,7 +46,8 @@ export enum ITW_ACTIONS_EVENTS {
   ITW_START_DEACTIVATION = "ITW_START_DEACTIVATION",
   ITW_NEW_ID_RESET = "ITW_NEW_ID_RESET",
   ITW_CREDENTIAL_RENEW_START = "ITW_CREDENTIAL_RENEW_START",
-  ITW_ISSUANCE_CREDENTIAL_SCROLL = "ITW_ISSUANCE_CREDENTIAL_SCROLL"
+  ITW_ISSUANCE_CREDENTIAL_SCROLL = "ITW_ISSUANCE_CREDENTIAL_SCROLL",
+  ITW_CREDENTIAL_CARD_MODAL = "ITW_CREDENTIAL_CARD_MODAL"
 }
 
 export enum ITW_ERRORS_EVENTS {
@@ -68,7 +69,10 @@ export enum ITW_ERRORS_EVENTS {
   ITW_LOGIN_ID_NOT_MATCH = "ITW_LOGIN_ID_NOT_MATCH",
   ITW_ALREADY_HAS_CREDENTIAL = "ITW_ALREADY_HAS_CREDENTIAL",
   ITW_ADD_CREDENTIAL_INVALID_STATUS = "ITW_ADD_CREDENTIAL_INVALID_STATUS",
-  ITW_ALREADY_ACTIVATED = "ITW_ALREADY_ACTIVATED"
+  ITW_ALREADY_ACTIVATED = "ITW_ALREADY_ACTIVATED",
+  ITW_STATUS_WALLET_ATTESTATION_FAILURE = "ITW_STATUS_WALLET_ATTESTATION_FAILURE",
+  ITW_STATUS_CREDENTIAL_ATTESTATION_FAILURE = "ITW_STATUS_CREDENTIAL_ATTESTATION_FAILURE",
+  ITW_TRUSTMARK_RENEW_FAILURE = "ITW_TRUSTMARK_RENEW_FAILURE"
 }
 
 export enum ITW_EXIT_EVENTS {

ts/features/itwallet/analytics/index.ts

@@ -493,6 +493,16 @@ export function trackIssuanceCredentialScrollToBottom(
   );
 }
 
+export function trackCredentialCardModal(credential: MixPanelCredential) {
+  void mixpanelTrack(
+    ITW_ACTIONS_EVENTS.ITW_CREDENTIAL_CARD_MODAL,
+    buildEventProperties("UX", "action", {
+      credential,
+      credential_status: "valid"
+    })
+  );
+}
+
 // #endregion ACTIONS
 
 // #region ERRORS
@@ -651,6 +661,31 @@ export const trackItwAlreadyActivated = () => {
   );
 };
 
+export const trackItwStatusWalletAttestationFailure = () => {
+  void mixpanelTrack(
+    ITW_ERRORS_EVENTS.ITW_STATUS_WALLET_ATTESTATION_FAILURE,
+    buildEventProperties("KO", "error")
+  );
+};
+
+export const trackItwStatusCredentialAttestationFailure = (
+  credential: MixPanelCredential
+) => {
+  void mixpanelTrack(
+    ITW_ERRORS_EVENTS.ITW_STATUS_CREDENTIAL_ATTESTATION_FAILURE,
+    buildEventProperties("KO", "error", { credential })
+  );
+};
+
+export const trackItwTrustmarkRenewFailure = (
+  credential: MixPanelCredential
+) => {
+  void mixpanelTrack(
+    ITW_ERRORS_EVENTS.ITW_TRUSTMARK_RENEW_FAILURE,
+    buildEventProperties("KO", "error", { credential })
+  );
+};
+
 // #endregion ERRORS
 
 // #region PROFILE PROPERTIES

ts/features/itwallet/common/store/selectors/remoteConfig.ts

@@ -108,14 +108,14 @@ export const itwDeferredIssuanceScreenContentSelector = createSelector(
 );
 
 /**
- * Return the remote config content for the deferred issuance screen content.
+ * Return the remote config about iPatente CTA inside the MDL credential details screen.
  */
-export const itwIsIPatenteCtaEnabledSelector = createSelector(
+export const itwIPatenteCtaConfigSelector = createSelector(
   itwRemoteConfigSelector,
   itwConfig =>
     pipe(
       itwConfig,
-      O.map(itw => itw.ipatente_cta_visible),
-      O.getOrElse(() => false)
+      O.map(itw => itw.ipatente_cta),
+      O.toUndefined
     )
 );

ts/features/itwallet/credentials/saga/checkCredentialsStatusAttestation.ts

@@ -16,6 +16,10 @@ import { itwCredentialsStore } from "../store/actions";
 import { updateMixpanelProfileProperties } from "../../../../mixpanelConfig/profileProperties";
 import { updateMixpanelSuperProperties } from "../../../../mixpanelConfig/superProperties";
 import { GlobalState } from "../../../../store/reducers/types";
+import {
+  CREDENTIALS_MAP,
+  trackItwStatusCredentialAttestationFailure
+} from "../../analytics";
 
 const { isIssuerResponseError, IssuerResponseErrorCodes: Codes } = Errors;
 
@@ -37,6 +41,10 @@ export function* updateCredentialStatusAttestationSaga(
     };
   } catch (e) {
     if (isIssuerResponseError(e, Codes.CredentialInvalidStatus)) {
+      trackItwStatusCredentialAttestationFailure(
+        CREDENTIALS_MAP[credential.credentialType]
+      );
+
       return {
         ...credential,
         storedStatusAttestation: {

ts/features/itwallet/lifecycle/saga/checkWalletInstanceStateSaga.ts

@@ -10,6 +10,7 @@ import { itwUpdateWalletInstanceStatus } from "../../walletInstance/store/action
 import { itwLifecycleIsOperationalOrValid } from "../store/selectors";
 import { itwIntegritySetServiceIsReady } from "../../issuance/store/actions";
 import { getNetworkError } from "../../../../utils/errors";
+import { trackItwStatusWalletAttestationFailure } from "../../analytics";
 import { handleWalletInstanceResetSaga } from "./handleWalletInstanceResetSaga";
 
 export function* getStatusOrResetWalletInstance(integrityKeyTag: string) {
@@ -25,6 +26,7 @@ export function* getStatusOrResetWalletInstance(integrityKeyTag: string) {
 
     if (walletInstanceStatus.is_revoked) {
       yield* call(handleWalletInstanceResetSaga);
+      trackItwStatusWalletAttestationFailure();
     }
 
     // Update wallet instance status

ts/features/itwallet/presentation/components/ItwPresentationDetailsFooter.tsx

@@ -17,9 +17,11 @@ import {
   trackItwCredentialDelete,
   trackWalletCredentialSupport
 } from "../../analytics";
-import { itwIsIPatenteCtaEnabledSelector } from "../../common/store/selectors/remoteConfig";
+import { itwIPatenteCtaConfigSelector } from "../../common/store/selectors/remoteConfig";
 import { StoredCredential } from "../../common/utils/itwTypesUtils";
 import { itwCredentialsRemove } from "../../credentials/store/actions";
+import { trackAuthenticationStart } from "../../../fims/common/analytics";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 
 type ItwPresentationDetailFooterProps = {
   credential: StoredCredential;
@@ -131,28 +133,40 @@ const getCredentialActions = (credentialType: string): React.ReactNode =>
  * Renders the IPatente service action item
  */
 const IPatenteListItemAction = () => {
-  const isIPatenteEnabled = useIOSelector(itwIsIPatenteCtaEnabledSelector);
+  const ctaConfig = useIOSelector(itwIPatenteCtaConfigSelector);
 
-  if (!isIPatenteEnabled) {
+  if (!ctaConfig?.visibility) {
     return null;
   }
 
   const label = I18n.t(
     "features.itWallet.presentation.credentialDetails.actions.openIPatente"
   );
 
+  const trackIPatenteAuthenticationStart = (label: string) =>
+    trackAuthenticationStart(
+      ctaConfig.service_id as ServiceId,
+      ctaConfig.service_name,
+      ctaConfig.service_organization_name,
+      ctaConfig.service_organization_fiscal_code,
+      label,
+      //TODO Change with a new source
+      "message_detail"
+    );
+
   return (
     <ListItemAction
       testID="openIPatenteActionTestID"
       variant="primary"
       icon="externalLink"
       label={label}
       onPress={() => {
+        trackIPatenteAuthenticationStart(label);
         NavigationService.navigate(FIMS_ROUTES.MAIN, {
           screen: FIMS_ROUTES.CONSENTS,
           params: {
             ctaText: label,
-            ctaUrl: "https://licences.ipatente.io.pagopa.it/licences"
+            ctaUrl: ctaConfig.url
           }
         });
       }}

ts/features/itwallet/presentation/components/__tests__/ItwPresentationDetailFooter.test.tsx

@@ -27,8 +27,12 @@ describe("ItwPresentationDetailsFooter", () => {
 
   it("should render iPatente action", () => {
     jest
-      .spyOn(remoteConfigSelectors, "itwIsIPatenteCtaEnabledSelector")
-      .mockImplementation(() => true);
+      .spyOn(remoteConfigSelectors, "itwIPatenteCtaConfigSelector")
+      .mockImplementation(() => ({
+        visibility: true,
+        url: "",
+        service_id: ""
+      }));
 
     const { queryByTestId } = renderComponent(CredentialType.DRIVING_LICENSE);
 

ts/features/itwallet/presentation/screens/ItwPresentationCredentialCardModal.tsx

@@ -4,9 +4,10 @@ import {
   useIOTheme,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import React from "react";
+import React, { useCallback } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useFocusEffect } from "@react-navigation/native";
 import I18n from "../../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
 import { useMaxBrightness } from "../../../../utils/brightness";
@@ -21,6 +22,7 @@ import {
 } from "../../common/utils/itwTypesUtils";
 import { ItwParamsList } from "../../navigation/ItwParamsList";
 import { ItwPresentationCredentialCardFlipButton } from "../components/ItwPresentationCredentialCardFlipButton";
+import { CREDENTIALS_MAP, trackCredentialCardModal } from "../../analytics";
 import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 export type ItwPresentationCredentialCardModalNavigationParams = {
@@ -45,6 +47,12 @@ const ItwPresentationCredentialCardModal = ({ route, navigation }: Props) => {
   usePreventScreenCapture();
   useMaxBrightness({ useSmoothTransition: true });
 
+  useFocusEffect(
+    useCallback(() => {
+      trackCredentialCardModal(CREDENTIALS_MAP[credential.credentialType]);
+    }, [credential.credentialType])
+  );
+
   React.useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (

ts/features/itwallet/presentation/screens/ItwPresentationCredentialFiscalCodeModal.tsx

@@ -7,10 +7,11 @@ import {
   BodySmall,
   useIOTheme
 } from "@pagopa/io-app-design-system";
-import React from "react";
+import React, { useCallback } from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import Barcode from "react-native-barcode-builder";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useFocusEffect } from "@react-navigation/native";
 import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../../store/hooks";
@@ -19,6 +20,7 @@ import {
   selectFiscalCodeFromEid,
   selectNameSurnameFromEid
 } from "../../credentials/store/selectors";
+import { trackCredentialCardModal } from "../../analytics";
 import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 /**
@@ -76,6 +78,12 @@ const ItwPresentationCredentialFiscalCodeModal = () => {
   usePreventScreenCapture();
   useMaxBrightness({ useSmoothTransition: true });
 
+  useFocusEffect(
+    useCallback(() => {
+      trackCredentialCardModal("ITW_TS_V2");
+    }, [])
+  );
+
   React.useLayoutEffect(() => {
     navigation.setOptions({
       header: () => (

ts/features/itwallet/trustmark/machine/machine.ts

@@ -1,6 +1,10 @@
 import { addSeconds, differenceInSeconds, isPast } from "date-fns";
 import { assign, fromPromise, not, setup } from "xstate";
 import { ItwTags } from "../../machine/tags";
+import {
+  CREDENTIALS_MAP,
+  trackItwTrustmarkRenewFailure
+} from "../../analytics";
 import {
   GetCredentialTrustmarkUrlActorInput,
   GetCredentialTrustmarkUrlActorOutput,
@@ -55,7 +59,10 @@ export const itwTrustmarkMachine = setup({
     setFailure: assign({
       failure: ({ event }) => mapEventToFailure(event)
     }),
-    showRetryFailureToast: notImplemented
+    showRetryFailureToast: notImplemented,
+    trackTrustmarkFailure: ({ context }) => {
+      trackItwTrustmarkRenewFailure(CREDENTIALS_MAP[context.credentialType]);
+    }
   },
   actors: {
     getWalletAttestationActor:
@@ -174,7 +181,7 @@ export const itwTrustmarkMachine = setup({
     },
     Failure: {
       description: "This state is reached when an error occurs",
-      entry: "incrementAttempts",
+      entry: ["incrementAttempts", "trackTrustmarkFailure"],
       on: {
         retry: [
           {

ts/store/reducers/__mock__/backendStatus.ts

@@ -216,7 +216,7 @@
       }
     }
   },
   config: {
     premiumMessages: {
       opt_in_out_enabled: false
     },
@@ -304,12 +304,16 @@
       feedback_banner_visible: true,
       disabled_identification_methods: [],
       disabled_credentials: [],
-      ipatente_cta_visible: true
+      ipatente_cta: {
+        visibility: true,
+        url: "https://www.ipatente.com",
+        service_id: "0010101010101"
+      },
     }
   }
 };
 
 export const baseBackendConfig: Config = {
   premiumMessages: {
     opt_in_out_enabled: false
   },
@@ -397,6 +401,10 @@
     feedback_banner_visible: true,
     disabled_credentials: [],
     disabled_identification_methods: [],
-    ipatente_cta_visible: true
+    ipatente_cta: {
+      visibility: true,
+      url: "https://www.ipatente.com",
+      service_id: "0010101010101"
+    }
   }
 };