feat(Bonus Pagamenti Digitali): [#176093031] Setup Mixpanel push noti…

…fication (#2555)

* [#176093031] add support

* [#176093031] add bottom margin inside a badge

ts/boot/configurePushNotification.ts

@@ -8,6 +8,7 @@ import { NonEmptyString } from "italia-ts-commons/lib/strings";
 import { Alert } from "react-native";
 import PushNotification from "react-native-push-notification";
 
+import { constNull } from "fp-ts/lib/function";
 import { store } from "../App";
 import { debugRemotePushNotification, gcmSenderId } from "../config";
 import { loadMessages } from "../store/actions/messages";
@@ -16,6 +17,7 @@ import {
   updateNotificationsPendingMessage
 } from "../store/actions/notifications";
 import { isDevEnv } from "../utils/environment";
+import { setMixpanelPushNotificationToken } from "../mixpanel";
 
 /**
  * Helper type used to validate the notification payload.
@@ -36,6 +38,10 @@ function configurePushNotifications() {
   PushNotification.configure({
     // Called when token is generated
     onRegister: token => {
+      // set push notification token on mixpanel
+      setMixpanelPushNotificationToken(token.token)
+        .then(constNull)
+        .catch(constNull);
       // Dispatch an action to save the token in the store
       store.dispatch(updateNotificationsInstallationToken(token.token));
     },

ts/components/wallet/PaymentMethodsList.tsx

@@ -4,7 +4,13 @@
  */
 import { Badge, ListItem, Text, View } from "native-base";
 import * as React from "react";
-import { Alert, FlatList, ListRenderItemInfo, StyleSheet } from "react-native";
+import {
+  Alert,
+  FlatList,
+  ListRenderItemInfo,
+  Platform,
+  StyleSheet
+} from "react-native";
 import { connect } from "react-redux";
 import { Option } from "fp-ts/lib/Option";
 import { H3 } from "../core/typography/H3";
@@ -61,7 +67,11 @@ const styles = StyleSheet.create({
   descriptionPadding: { paddingRight: 24 },
 
   badgeContainer: { height: 18, backgroundColor: IOColors.blue },
-  badgeText: { fontSize: 12, lineHeight: 18 }
+  badgeText: {
+    fontSize: 12,
+    lineHeight: 18,
+    marginBottom: Platform.select({ android: 2, default: 0 })
+  }
 });
 
 export const showPaymentMethodIncomingAlert = () =>

ts/mixpanel.ts

@@ -33,3 +33,10 @@ const setupMixpanel = async (mp: MixpanelInstance) => {
   // Identify the user using the device uniqueId
   await mp.identify(DeviceInfo.getUniqueId());
 };
+
+export const setMixpanelPushNotificationToken = (token: string) => {
+  if (mixpanel) {
+    return mixpanel.setPushRegistrationId(token);
+  }
+  return Promise.resolve();
+};