feature/pin-5843-add-mix-panel-events

src/api/hooks/useDownloadFile.ts

@@ -20,13 +20,24 @@ export function downloadFile(responseData: File | string, filename = 'download')
 
 export function useDownloadFile<T = unknown[]>(
   service: (args: T) => Promise<File | string | { file: File; filename: string }>,
-  config: { errorToastLabel?: string; successToastLabel?: string; loadingLabel: string }
+  labels: {
+    errorToastLabel?: string
+    successToastLabel?: string
+    loadingLabel: string
+  }
 ) {
   const { showOverlay, hideOverlay } = useLoadingOverlay()
   const { showToast } = useToastNotification()
 
-  return async (args: T, filename?: string) => {
-    showOverlay(config.loadingLabel)
+  return async (
+    args: T,
+    filename?: string,
+    config?: {
+      onSuccess?: () => void
+      onError?: (error: unknown) => void
+    }
+  ) => {
+    showOverlay(labels.loadingLabel)
     try {
       const data = await service(args)
 
@@ -40,11 +51,12 @@ export function useDownloadFile<T = unknown[]>(
       } else {
         downloadFile(data, filename)
       }
-
-      config.successToastLabel && showToast(config.successToastLabel, 'success')
+      labels.successToastLabel && showToast(labels.successToastLabel, 'success')
+      config?.onSuccess?.()
     } catch (error) {
       console.error(error)
-      config.errorToastLabel && showToast(config.errorToastLabel, 'error')
+      labels.errorToastLabel && showToast(labels.errorToastLabel, 'error')
+      config?.onError?.(error)
     } finally {
       hideOverlay()
     }

src/config/tracking.ts

@@ -11,16 +11,66 @@ import { STORAGE_KEY_SESSION_TOKEN } from './constants'
 import { parseJwt } from '@/api/auth/auth.utils'
 
 // This should be an union of all the possible mixpanel events
-type MixPanelEvent = {
-  eventName: 'INTEROP_CATALOG_READ'
-  properties: MixPanelCatalogReadEventProps
-}
+type MixPanelEvent =
+  | {
+      eventName: 'INTEROP_CATALOG_READ'
+      properties: MixPanelCatalogReadAndDownloadEventProps
+    }
+  | {
+      eventName: 'INTEROP_CATALOG_SEARCH_KEYWORD'
+      properties: MixPanelSearchKeywordEventProps
+    }
+  | {
+      eventName: 'INTEROP_EXT_LINK_DTD_ESERVICE_GUIDE'
+      properties: MixPanelLinkEserviceGuideAndApiCheckerEventProps
+    }
+  | {
+      eventName: 'INTEROP_EXT_LINK_DTD_API_CHECKER'
+      properties: MixPanelLinkEserviceGuideAndApiCheckerEventProps
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_DOWNLOAD_REQUEST'
+      properties: MixPanelCatalogReadAndDownloadEventProps
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_DOWNLOAD_RESPONSE_SUCCESS'
+      properties: {}
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_DOWNLOAD_RESPONSE_ERROR'
+      properties: MixPanelResponseErrorEvent
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_UPLOAD_REQUEST'
+      properties: {}
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_UPLOAD_RESPONSE_SUCCESS'
+      properties: {}
+    }
+  | {
+      eventName: 'INTEROP_ESERVICE_UPLOAD_RESPONSE_ERROR'
+      properties: MixPanelResponseErrorEvent
+    }
 
-type MixPanelCatalogReadEventProps = {
+type MixPanelCatalogReadAndDownloadEventProps = {
   eserviceId: string
   descriptorId: string
 }
 
+type MixPanelSearchKeywordEventProps = {
+  q?: string
+  producersId?: string[]
+}
+
+type MixPanelLinkEserviceGuideAndApiCheckerEventProps = {
+  src: 'CREATE_ESERVICE'
+}
+
+type MixPanelResponseErrorEvent = {
+  errorCode: number
+}
+
 const isTrackingEnabled = NODE_ENV === 'production' && STAGE === 'PROD'
 
 const getTrackingDefaultProps = () => {

src/pages/ConsumerEServiceCatalogPage/ConsumerEServiceCatalog.page.tsx

@@ -12,6 +12,8 @@ import {
 } from '@pagopa/interop-fe-commons'
 import type { EServiceDescriptorState, GetEServicesCatalogParams } from '@/api/api.generatedTypes'
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { trackEvent } from '@/config/tracking'
+import { debounce } from 'lodash'
 
 const ConsumerEServiceCatalogPage: React.FC = () => {
   const { t } = useTranslation('pages', { keyPrefix: 'consumerEServiceCatalog' })
@@ -33,7 +35,11 @@ const ConsumerEServiceCatalogPage: React.FC = () => {
   const { filtersParams, ...filtersHandlers } = useFilters<
     Omit<GetEServicesCatalogParams, 'limit' | 'offset'>
   >([
-    { name: 'q', label: tEservice('nameField.label'), type: 'freetext' },
+    {
+      name: 'q',
+      label: tEservice('nameField.label'),
+      type: 'freetext',
+    },
     {
       name: 'producersIds',
       label: tEservice('providerField.label'),
@@ -52,6 +58,20 @@ const ConsumerEServiceCatalogPage: React.FC = () => {
     placeholderData: keepPreviousData,
   })
 
+  React.useEffect(() => {
+    const debouncedTrackEvent = debounce(() => {
+      if (filtersParams.q || filtersParams.producersIds) {
+        trackEvent('INTEROP_CATALOG_SEARCH_KEYWORD', {
+          q: filtersParams.q,
+          producersId: filtersParams.producersIds,
+        })
+      }
+    }, 4000)
+
+    debouncedTrackEvent()
+    return () => debouncedTrackEvent.cancel()
+  }, [filtersParams.q, filtersParams.producersIds])
+
   return (
     <PageContainer title={t('title')} description={t('description')}>
       <Filters {...filtersHandlers} />

src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepDocuments/EServiceCreateStepDocuments.tsx

@@ -12,6 +12,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { IconLink } from '@/components/shared/IconLink'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { openApiCheckerLink } from '@/config/constants'
+import { trackEvent } from '@/config/tracking'
 
 export const EServiceCreateStepDocuments: React.FC<ActiveStepProps> = () => {
   const { t } = useTranslation('eservice')
@@ -29,6 +30,7 @@ export const EServiceCreateStepDocuments: React.FC<ActiveStepProps> = () => {
           href={openApiCheckerLink}
           target="_blank"
           endIcon={<LaunchIcon fontSize="small" />}
+          onClick={() => trackEvent('INTEROP_EXT_LINK_DTD_API_CHECKER', { src: 'CREATE_ESERVICE' })}
         >
           {t('create.step4.interface.description.restLinkLabel')}
         </IconLink>

src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepGeneral/EServiceCreateStepGeneral.tsx

@@ -17,6 +17,7 @@ import LaunchIcon from '@mui/icons-material/Launch'
 import { eserviceNamingBestPracticeLink } from '@/config/constants'
 import { STAGE } from '@/config/env'
 import { PagoPAEnvVars } from '@/types/common.types'
+import { trackEvent } from '@/config/tracking'
 
 export type EServiceCreateStepGeneralFormValues = {
   name: string
@@ -94,6 +95,11 @@ export const EServiceCreateStepGeneral: React.FC = () => {
                 href={eserviceNamingBestPracticeLink}
                 target="_blank"
                 endIcon={<LaunchIcon fontSize="small" />}
+                onClick={() =>
+                  trackEvent('INTEROP_EXT_LINK_DTD_ESERVICE_GUIDE', {
+                    src: 'CREATE_ESERVICE',
+                  })
+                }
               >
                 {t('create.step1.detailsDescription.linkLabel')}
               </IconLink>{' '}

src/pages/ProviderEServiceDetailsPage/components/ProviderEServiceDetailsTab/ProviderEServiceGeneralInfoSection/ProviderEServiceGeneralInfoSection.tsx

@@ -14,6 +14,8 @@ import { ProviderEServiceUpdateDescriptionDrawer } from './ProviderEServiceUpdat
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useGetDelegationUserRole } from '@/hooks/useGetDelegationUserRole'
 import { AuthHooks } from '@/api/auth'
+import { trackEvent } from '@/config/tracking'
+import { isAxiosError } from 'axios'
 
 export const ProviderEServiceGeneralInfoSection: React.FC = () => {
   const { t } = useTranslation('eservice', {
@@ -58,7 +60,22 @@ export const ProviderEServiceGeneralInfoSection: React.FC = () => {
   }
 
   const handleExportVersion = () => {
-    exportVersion({ eserviceId, descriptorId })
+    trackEvent('INTEROP_ESERVICE_DOWNLOAD_REQUEST', {
+      eserviceId: eserviceId,
+      descriptorId: descriptorId,
+    })
+    exportVersion({ eserviceId, descriptorId }, undefined, {
+      onSuccess: () => {
+        trackEvent('INTEROP_ESERVICE_DOWNLOAD_RESPONSE_SUCCESS', {})
+      },
+      onError: (error) => {
+        if (isAxiosError(error) && error.response) {
+          trackEvent('INTEROP_ESERVICE_DOWNLOAD_RESPONSE_ERROR', {
+            errorCode: error.response.status,
+          })
+        }
+      },
+    })
   }
 
   const hasSingleVersion =

src/pages/ProviderEServiceListPage/components/ProviderEServiceImportVersionDrawer.tsx

@@ -2,9 +2,11 @@ import { EServiceMutations } from '@/api/eservice'
 import { Drawer } from '@/components/shared/Drawer'
 import { RHFSingleFileInput } from '@/components/shared/react-hook-form-inputs'
 import { importExportEServiceGuideLink } from '@/config/constants'
+import { trackEvent } from '@/config/tracking'
 import { useNavigate } from '@/router'
 import { Box, FormControlLabel, Link, Stack, Switch, Typography } from '@mui/material'
 import { InformationContainer } from '@pagopa/interop-fe-commons'
+import { isAxiosError } from 'axios'
 import React from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
@@ -44,12 +46,14 @@ export const ProviderEServiceImportVersionDrawer: React.FC<
   const { mutate: importVersion } = EServiceMutations.useImportVersion()
 
   const onSubmit = async (values: EServiceImportVersionDocFormValues) => {
+    trackEvent('INTEROP_ESERVICE_UPLOAD_REQUEST', {})
     if (!values.eserviceFile || !isConfirmedImport) return
 
     importVersion(
       { eserviceFile: values.eserviceFile },
       {
         onSuccess: (res) => {
+          trackEvent('INTEROP_ESERVICE_UPLOAD_RESPONSE_SUCCESS', {})
           onClose()
           navigate('PROVIDE_ESERVICE_SUMMARY', {
             params: {
@@ -58,6 +62,13 @@ export const ProviderEServiceImportVersionDrawer: React.FC<
             },
           })
         },
+        onError: (error) => {
+          if (isAxiosError(error) && error.response) {
+            trackEvent('INTEROP_ESERVICE_UPLOAD_RESPONSE_ERROR', {
+              errorCode: error.response.status,
+            })
+          }
+        },
       }
     )
   }