chore(IT Wallet): [SIW-1415] Add debug info to IT Wallet screens in d…

…ebug mode (#6055)

ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap

@@ -34,6 +34,7 @@ exports[`Check the addition for new fields to the persisted store. If one of thi
 
 exports[`Check the addition for new fields to the persisted store. If one of this test fails, check that exists the migration before updating the snapshot! Freeze 'debug' state 1`] = `
 {
+  "debugData": {},
   "isDebugModeEnabled": false,
 }
 `;

ts/boot/configureStoreAndPersistor.ts

@@ -438,13 +438,12 @@ const rootPersistConfig: PersistConfig = {
   migrate: createMigrate(migrations, { debug: isDevEnv }),
   // Entities and features implement a persisted reduce that avoids persisting messages.
   // Other entities section will be persisted
-  blacklist: ["entities", "features", "lollipop"],
+  blacklist: ["debug", "entities", "features", "lollipop"],
   // Sections of the store that must be persisted and rehydrated with this storage.
   whitelist: [
     "onboarding",
     "notifications",
     "profile",
-    "debug",
     "persistedPreferences",
     "installation",
     "payments",

ts/components/DebugInfoOverlay.tsx

@@ -1,30 +1,31 @@
+import {
+  HStack,
+  IOColors,
+  VStack,
+  hexToRgba,
+  makeFontStyleObject
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
+import { useState } from "react";
 import {
-  StyleSheet,
+  Platform,
   Pressable,
   SafeAreaView,
-  View,
-  Text,
-  Platform
+  StyleSheet,
+  Text
 } from "react-native";
-import { connect } from "react-redux";
-import { useState } from "react";
 import { widthPercentageToDP } from "react-native-responsive-screen";
-import {
-  HSpacer,
-  IOColors,
-  IOStyles,
-  hexToRgba,
-  makeFontStyleObject
-} from "@pagopa/io-app-design-system";
+import { connect } from "react-redux";
 import { ReduxProps } from "../store/actions/types";
+import { useIOSelector } from "../store/hooks";
 import { currentRouteSelector } from "../store/reducers/navigation";
+import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import { GlobalState } from "../store/reducers/types";
 import { getAppVersion } from "../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../utils/clipboard";
-import { useIOSelector } from "../store/hooks";
-import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import PagoPATestIndicator from "./PagoPATestIndicator";
+import { DebugDataIndicator } from "./debug/DebugDataIndicator";
+import { DebugDataOverlay } from "./debug/DebugDataOverlay";
 
 type Props = ReturnType<typeof mapStateToProps> & ReduxProps;
 
@@ -66,48 +67,57 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     maxWidth: widthPercentageToDP(80),
     paddingHorizontal: 8,
-    backgroundColor: debugItemBgColor,
-    marginTop: 4
+    backgroundColor: debugItemBgColor
   }
 });
 
 const DebugInfoOverlay: React.FunctionComponent<Props> = (props: Props) => {
   const appVersion = getAppVersion();
   const [showRootName, setShowRootName] = useState(true);
+  const [isDebugDataVisibile, showDebugData] = useState(false);
   const isPagoPATestEnabled = useIOSelector(isPagoPATestEnabledSelector);
 
   const appVersionText = `v. ${appVersion}`;
 
   return (
-    <SafeAreaView style={styles.versionContainer} pointerEvents="box-none">
-      <View style={IOStyles.row}>
-        <Pressable
-          style={styles.versionTextWrapper}
-          onPress={() => setShowRootName(prevState => !prevState)}
-          accessibilityRole="button"
-          accessibilityLabel={appVersionText}
-          accessibilityHint={"Tap here to show/hide the root name"}
-        >
-          <Text style={styles.versionText}>{appVersionText}</Text>
-        </Pressable>
-        {isPagoPATestEnabled && (
-          <>
-            <HSpacer size={4} />
-            <PagoPATestIndicator />
-          </>
-        )}
-      </View>
-      {showRootName && (
-        <Pressable
-          style={styles.routeText}
-          accessibilityRole="button"
-          accessibilityHint={"Copy the technical screen name"}
-          onPress={() => clipboardSetStringWithFeedback(props.screenNameDebug)}
-        >
-          <Text style={styles.screenDebugText}>{props.screenNameDebug}</Text>
-        </Pressable>
+    <>
+      <SafeAreaView style={styles.versionContainer} pointerEvents="box-none">
+        <VStack space={4} alignItems="center">
+          <HStack space={4}>
+            <Pressable
+              style={styles.versionTextWrapper}
+              onPress={() => setShowRootName(prevState => !prevState)}
+              accessibilityRole="button"
+              accessibilityLabel={appVersionText}
+              accessibilityHint={"Tap here to show/hide the root name"}
+            >
+              <Text style={styles.versionText}>{appVersionText}</Text>
+            </Pressable>
+            {isPagoPATestEnabled && <PagoPATestIndicator />}
+          </HStack>
+          {showRootName && (
+            <Pressable
+              style={styles.routeText}
+              accessibilityRole="button"
+              accessibilityHint={"Copy the technical screen name"}
+              onPress={() =>
+                clipboardSetStringWithFeedback(props.screenNameDebug)
+              }
+            >
+              <Text style={styles.screenDebugText}>
+                {props.screenNameDebug}
+              </Text>
+            </Pressable>
+          )}
+          <DebugDataIndicator
+            onPress={() => showDebugData(prevState => !prevState)}
+          />
+        </VStack>
+      </SafeAreaView>
+      {isDebugDataVisibile && (
+        <DebugDataOverlay onDismissed={() => showDebugData(false)} />
       )}
-    </SafeAreaView>
+    </>
   );
 };
 

ts/components/debug/DebugDataIndicator.tsx

@@ -0,0 +1,63 @@
+import {
+  HStack,
+  IOColors,
+  Icon,
+  hexToRgba,
+  makeFontStyleObject
+} from "@pagopa/io-app-design-system";
+import _ from "lodash";
+import * as React from "react";
+import { Pressable, StyleSheet, Text } from "react-native";
+import { useIOSelector } from "../../store/hooks";
+import { debugDataSelector } from "../../store/reducers/debug";
+
+type DebugDataIndicatorProps = {
+  onPress: () => void;
+};
+
+export const DebugDataIndicator = (props: DebugDataIndicatorProps) => {
+  const data = useIOSelector(debugDataSelector);
+  const dataSize = _.size(data);
+
+  if (dataSize === 0) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      style={styles.wrapper}
+      accessibilityRole="button"
+      accessibilityHint={"Opend the debug data"}
+      onPress={props.onPress}
+    >
+      <HStack space={4} alignItems="center">
+        <Icon name="ladybug" size={16} color="warning-850" />
+        <Text style={styles.text}>{dataSize}</Text>
+      </HStack>
+    </Pressable>
+  );
+};
+
+const debugItemBgColor = hexToRgba(IOColors["warning-500"], 0.4);
+const debugItemBorderColor = hexToRgba(IOColors["warning-850"], 0.1);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: debugItemBorderColor,
+    borderWidth: 1,
+    paddingHorizontal: 6,
+    borderRadius: 8,
+    backgroundColor: debugItemBgColor
+  },
+  text: {
+    letterSpacing: 0.2,
+    fontSize: 14,
+    textTransform: "uppercase",
+    color: IOColors["warning-850"],
+    ...makeFontStyleObject("Semibold")
+  }
+});

ts/components/debug/DebugDataOverlay.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useIOSelector } from "../../store/hooks";
+import { debugDataSelector } from "../../store/reducers/debug";
+import { DebugPrettyPrint } from "./DebugPrettyPrint";
+
+type DebugDataOverlayProps = {
+  onDismissed?: () => void;
+};
+
+export const DebugDataOverlay = ({ onDismissed }: DebugDataOverlayProps) => {
+  const debugData = useIOSelector(debugDataSelector);
+  return (
+    <SafeAreaView style={styles.container}>
+      <TouchableWithoutFeedback onPress={onDismissed} accessibilityRole="none">
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContainer}
+      >
+        {Object.entries(debugData).map(([key, value]) => (
+          <DebugPrettyPrint
+            key={`debug_data_${key}`}
+            title={key}
+            data={value}
+            expandable={true}
+            isExpanded={false}
+          />
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const overlayColor = "#000000B0";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 999,
+    paddingTop: 60
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: overlayColor
+  },
+  scroll: {
+    flexGrow: 0
+  },
+  scrollContainer: {
+    paddingHorizontal: 16
+  }
+});