chore: add dev mode screen

app/src/components/drawer/index.js

@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext} from 'react';
-import {SafeAreaView, StyleSheet, Platform, Dimensions, View, ScrollView, Linking, TouchableWithoutFeedback} from 'react-native';
+import {SafeAreaView, StyleSheet, Platform, Dimensions, View, ScrollView, Linking, TouchableWithoutFeedback, Alert} from 'react-native';
 import Modal from 'react-native-modal';
 import DrawerItem from './drawer-item';
 import LegalItem from './legal-item';
@@ -11,12 +11,14 @@ import NeedUpdateContext from '../../context/needUpdate';
 import {HOST, HMAC_SECRET} from '../../config';
 import {recommendApp} from '../../utils/share';
 import app from '../../../app.json';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export default ({navigation, visible, onClick}) => {
   const [isVisible, setIsVisible] = useState();
   const updateVisible = useContext(NeedUpdateContext);
 
   const [devModeCount, setDevModeCount] = useState(1);
+  const [isDevMode, setIsDevMode] = useState(false);
   const [npsProIsVisible, setNpsProIsVisible] = useState(true);
   const [badgeNpsProIsVisible, setBadgeNpsProIsVisible] = useState(false);
   const [badgeNotesVersionVisible, setBadgeNotesVersionVisible] = useState(false);
@@ -30,9 +32,21 @@ export default ({navigation, visible, onClick}) => {
       setNpsProIsVisible(proNPS === 'PRO');
       const badgeProNPS = await localStorage.getVisitProNPS();
       setBadgeNpsProIsVisible(!badgeProNPS);
+      const devMode = await AsyncStorage.getItem('devMode');
+      setIsDevMode(devMode === 'true');
     })();
   }, [visible]);
 
+  const handleDevModePress = async () => {
+    const newCount = devModeCount + 1;
+    setDevModeCount(newCount);
+    if (newCount % 5 === 0) {
+      await AsyncStorage.setItem('devMode', 'true');
+      setIsDevMode('true');
+      Alert.alert('Dev Mode', 'Dev mode activated!');
+    }
+  };
+
   const deviceHeight = Dimensions.get('window').height;
   return (
     <Modal
@@ -68,7 +82,6 @@ export default ({navigation, visible, onClick}) => {
                 }
               />
             ) : null}
-            {/* {npsProIsVisible ? ( */}
             <DrawerItem
               badge={badgeNpsProIsVisible}
               title="Donner mon avis"
@@ -80,22 +93,16 @@ export default ({navigation, visible, onClick}) => {
                 onClick();
               }}
             />
-            {/* ) : null} */}
+            {isDevMode && <DrawerItem title="Dev Mode" path="dev-mode" navigation={navigation} onClick={onClick} icon="GearSvg" />}
             <Separator />
             <LegalItem title="Conditions générales d'utilisation" path="cgu" navigation={navigation} onClick={onClick} />
             <LegalItem title="Politique de confidentialité" path="privacy" navigation={navigation} onClick={onClick} />
             <LegalItem title="Mentions légales" path="legal-mentions" navigation={navigation} onClick={onClick} />
-            <TouchableWithoutFeedback onPress={() => setDevModeCount(p => p + 1)}>
+            <TouchableWithoutFeedback onPress={handleDevModePress}>
               <View style={styles.versionContainer}>
                 <Text style={styles.versionLabel}>
                   {Platform.OS === 'ios' ? `${app.expo.version} (${app.expo.ios.buildNumber})` : `${app.expo.version} (${app.expo.android.versionCode})`}
                 </Text>
-                {devModeCount % 5 === 0 ? (
-                  <View>
-                    <Text style={styles.versionLabel}>{HOST}</Text>
-                    <Text style={styles.versionLabel}>{HMAC_SECRET ? HMAC_SECRET?.slice(-5) : 'empty'}</Text>
-                  </View>
-                ) : null}
               </View>
             </TouchableWithoutFeedback>
           </ScrollView>

app/src/navigation/router.js

@@ -65,6 +65,7 @@ import {registerForPushNotificationsAsync} from '../services/notifications-expo'
 import * as Device from 'expo-device';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import uuid from 'react-native-uuid';
+import DevMode from '../scenes/dev-mode';
 
 const Stack = createStackNavigator();
 
@@ -241,6 +242,7 @@ class Router extends React.Component {
             <Stack.Screen name="goals-create-form" component={GoalsCreateForm} />
             <Stack.Screen name="goal-day-selector" component={GoalDaySelector} />
             <Stack.Screen name="goal-config" component={GoalConfig} />
+            <Stack.Screen name="dev-mode" component={DevMode} options={{headerShown: true}} />
           </Stack.Navigator>
         </NavigationContainer>
         <EnvironmentIndicator />

app/src/scenes/dev-mode/index.js

@@ -0,0 +1,111 @@
+import React, {useState, useEffect} from 'react';
+import {View, StyleSheet, ScrollView, TouchableOpacity, Platform} from 'react-native';
+import Text from '../../components/MyText';
+import {colors} from '../../utils/colors';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {HOST, HMAC_SECRET} from '../../config';
+import app from '../../../app.json';
+
+const CollapsibleSection = ({title, children}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <View style={styles.section}>
+      <TouchableOpacity style={styles.sectionHeader} onPress={() => setIsExpanded(!isExpanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={[styles.arrow, isExpanded && styles.arrowDown]}>›</Text>
+      </TouchableOpacity>
+      {isExpanded && children}
+    </View>
+  );
+};
+
+const DevMode = ({navigation}) => {
+  const disableDevMode = async () => {
+    await AsyncStorage.setItem('devMode', 'false');
+    navigation.navigate('tabs');
+  };
+
+  const [deviceId, setDeviceId] = useState(null);
+
+  const fetchDeviceId = async () => {
+    const id = await AsyncStorage.getItem('deviceId');
+    setDeviceId(id);
+  };
+  useEffect(() => {
+    fetchDeviceId();
+  }, []);
+
+  return (
+    <ScrollView style={styles.container}>
+      <CollapsibleSection title="Environment">
+        <Text>Host: {HOST}</Text>
+        <Text>HMAC: {HMAC_SECRET ? `...${HMAC_SECRET.slice(-5)}` : 'empty'}</Text>
+      </CollapsibleSection>
+
+      <CollapsibleSection title="App Version">
+        <Text>Version: {app.expo.version}</Text>
+        <Text>Build: {Platform.OS === 'ios' ? app.expo.ios.buildNumber : app.expo.android.versionCode}</Text>
+      </CollapsibleSection>
+
+      <CollapsibleSection title="Local Storage">
+        <Text>Device ID: {deviceId}</Text>
+      </CollapsibleSection>
+
+      <TouchableOpacity style={styles.button} onPress={disableDevMode}>
+        <Text style={styles.buttonText}>Disable Dev Mode</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: colors.DARK_BLUE,
+    marginBottom: 20,
+  },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: colors.DARK_BLUE,
+  },
+  button: {
+    backgroundColor: colors.DARK_BLUE,
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 20,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  arrow: {
+    fontSize: 24,
+    color: colors.DARK_BLUE,
+    transform: [{rotate: '-90deg'}],
+  },
+  arrowDown: {
+    transform: [{rotate: '90deg'}],
+  },
+});
+
+export default DevMode;