feat: [IOPAE-1324] Add analytics tracking for service settings and selected actions

ts/features/services/common/analytics/index.ts

@@ -161,6 +161,22 @@ export const trackInstitutionDetailsError = (
     buildEventProperties("KO", undefined, { organization_fiscal_code, reason })
   );
 
+export const trackServicesPreferences = () =>
+  void mixpanelTrack(
+    "SERVICES_PREFERENCES",
+    buildEventProperties("UX", "action")
+  );
+
+export const trackServicesPreferencesSelected = (
+  landing_page: "preferences_services" | "profile_main"
+) =>
+  void mixpanelTrack(
+    "SERVICES_PREFERENCES_SELECTED",
+    buildEventProperties("UX", "action", {
+      landing_page
+    })
+  );
+
 export const trackSearchPage = () =>
   void mixpanelTrack(
     "SERVICES_SEARCH_PAGE",

ts/features/services/details/components/ServiceDetailsTosAndPrivacy.tsx

@@ -4,8 +4,7 @@ import {
   Divider,
   IOStyles,
   ListItemAction,
-  ListItemHeader,
-  VSpacer
+  ListItemHeader
 } from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
 import { openWebUrl } from "../../../../utils/url";
@@ -15,7 +14,7 @@ import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 
 type TosAndPrivacyListItem = {
   condition?: boolean;
-} & Omit<ListItemAction, "variant" | "accessibilityLabel">;
+} & Omit<ListItemAction, "variant">;
 
 export type ServiceDetailsTosAndPrivacyProps = {
   serviceId: ServiceId;
@@ -53,11 +52,7 @@ export const ServiceDetailsTosAndPrivacy = ({
     ({
       item: { condition, ...rest }
     }: ListRenderItemInfo<TosAndPrivacyListItem>) => (
-      <ListItemAction
-        {...rest}
-        accessibilityLabel={rest.label}
-        variant="primary"
-      />
+      <ListItemAction {...rest} variant="primary" />
     ),
     []
   );
@@ -67,21 +62,18 @@ export const ServiceDetailsTosAndPrivacy = ({
   }
 
   return (
-    <>
-      <VSpacer size={40} />
-      <FlatList
-        ListHeaderComponent={
-          <ListItemHeader
-            label={I18n.t("services.details.tosAndPrivacy.title")}
-          />
-        }
-        ItemSeparatorComponent={() => <Divider />}
-        contentContainerStyle={IOStyles.horizontalContentPadding}
-        data={filteredTosAndPrivacyListItems}
-        keyExtractor={item => item.label}
-        renderItem={renderItem}
-        scrollEnabled={false}
-      />
-    </>
+    <FlatList
+      ListHeaderComponent={
+        <ListItemHeader
+          label={I18n.t("services.details.tosAndPrivacy.title")}
+        />
+      }
+      ItemSeparatorComponent={() => <Divider />}
+      contentContainerStyle={IOStyles.horizontalContentPadding}
+      data={filteredTosAndPrivacyListItems}
+      keyExtractor={item => item.label}
+      renderItem={renderItem}
+      scrollEnabled={false}
+    />
   );
 };

ts/features/services/details/screens/ServiceDetailsScreen.tsx

@@ -1,4 +1,8 @@
-import { IOVisualCostants, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  IOVisualCostants,
+  VSpacer,
+  VStack
+} from "@pagopa/io-app-design-system";
 import { useFocusEffect, useLinkTo } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
@@ -280,20 +284,18 @@ export const ServiceDetailsScreen = ({ route }: ServiceDetailsScreenProps) => {
           <CardWithMarkdownContent content={service_metadata.description} />
         </View>
       )}
-
-      <ServiceDetailsTosAndPrivacy serviceId={service_id} />
-
       <VSpacer size={40} />
-      <ServiceDetailsPreferences
-        serviceId={service_id}
-        availableChannels={available_notification_channels}
-      />
-
-      <VSpacer size={40} />
-      <ServiceDetailsMetadata
-        organizationFiscalCode={organization_fiscal_code}
-        serviceId={service_id}
-      />
+      <VStack space={40}>
+        <ServiceDetailsTosAndPrivacy serviceId={service_id} />
+        <ServiceDetailsPreferences
+          serviceId={service_id}
+          availableChannels={available_notification_channels}
+        />
+        <ServiceDetailsMetadata
+          organizationFiscalCode={organization_fiscal_code}
+          serviceId={service_id}
+        />
+      </VStack>
     </ServiceDetailsScreenComponent>
   );
 };

ts/features/services/home/hooks/useServicesHomeBottomSheet.tsx

@@ -10,13 +10,7 @@ import I18n from "../../../../i18n";
 import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import ROUTES from "../../../../navigation/routes";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
-
-type NavigationListItem = {
-  value: string;
-} & Pick<
-  ComponentProps<typeof ListItemNav>,
-  "description" | "onPress" | "testID"
->;
+import * as analytics from "../../common/analytics";
 
 const styles = StyleSheet.create({
   containerList: {
@@ -29,44 +23,47 @@ export const useServicesHomeBottomSheet = () => {
   const navigation = useIONavigation();
 
   const handleNavigateToServicesPreferencesScreen = useCallback(() => {
+    analytics.trackServicesPreferencesSelected("preferences_services");
     navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
       screen: ROUTES.PROFILE_PREFERENCES_SERVICES
     });
   }, [navigation]);
 
   const handleNavigateToSettingsScreen = useCallback(() => {
+    analytics.trackServicesPreferencesSelected("profile_main");
     navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
       screen: ROUTES.SETTINGS_MAIN
     });
   }, [navigation]);
 
-  const navigationListItems: ReadonlyArray<NavigationListItem> = [
-    {
-      value: I18n.t(
-        "services.home.bottomSheet.content.servicesPreferences.value"
-      ),
-      description: I18n.t(
-        "services.home.bottomSheet.content.servicesPreferences.description"
-      ),
-      testID: "navigate-to-services-preferences",
-      onPress: handleNavigateToServicesPreferencesScreen
-    },
-    {
-      value: I18n.t("services.home.bottomSheet.content.settings.value"),
-      description: I18n.t(
-        "services.home.bottomSheet.content.settings.description"
-      ),
-      testID: "navigate-to-settings-main",
-      onPress: handleNavigateToSettingsScreen
-    }
-  ];
+  const navigationListItems: ReadonlyArray<ComponentProps<typeof ListItemNav>> =
+    [
+      {
+        value: I18n.t(
+          "services.home.bottomSheet.content.servicesPreferences.value"
+        ),
+        description: I18n.t(
+          "services.home.bottomSheet.content.servicesPreferences.description"
+        ),
+        testID: "navigate-to-services-preferences",
+        onPress: handleNavigateToServicesPreferencesScreen
+      },
+      {
+        value: I18n.t("services.home.bottomSheet.content.settings.value"),
+        description: I18n.t(
+          "services.home.bottomSheet.content.settings.description"
+        ),
+        testID: "navigate-to-settings-main",
+        onPress: handleNavigateToSettingsScreen
+      }
+    ];
 
   const { present, bottomSheet, dismiss } = useIOBottomSheetAutoresizableModal({
     title: "",
     component: (
       <FlatList
         data={navigationListItems}
-        keyExtractor={item => item.value}
+        keyExtractor={(item, index) => `${item.value}-${index}`}
         renderItem={({ item: { onPress, ...rest } }) => (
           <ListItemNav
             {...rest}

ts/features/services/home/screens/ServicesHomeScreen.tsx

@@ -195,7 +195,10 @@ export const ServicesHomeScreen = () => {
     () => ({
       icon: "coggle",
       accessibilityLabel: I18n.t("global.buttons.settings"),
-      onPress: present
+      onPress: () => {
+        analytics.trackServicesPreferences();
+        present();
+      }
     }),
     [present]
   );