Update settings screen to include user data, events, tags

Author: hana-mostafaa

examples/default/src/components/VerticalListTile.tsx

@@ -17,6 +17,7 @@ export const VerticalListTile: React.FC<ListTileProps> = ({ title, onPress, chil
       borderBottomWidth="1"
       borderColor="coolGray.300"
       bg="coolGray.100"
+      accessible={false}
       _pressed={{ bg: 'coolGray.200' }}>
       <VStack justifyContent="stretch">
         <Text>{title}</Text>

examples/default/src/screens/settings/SettingsScreen.tsx

@@ -6,6 +6,7 @@ import Instabug, {
   InvocationEvent,
   Locale,
   NetworkLogger,
+  WelcomeMessageMode,
   ReproStepsMode,
 } from 'instabug-reactnative';
 import { InputGroup, InputLeftAddon, useToast, VStack, Button } from 'native-base';
@@ -30,12 +31,19 @@ export const SettingsScreen: React.FC<NativeStackScreenProps<HomeStackParamList,
   const [userID, setUserID] = useState('');
   const [userAttributeKey, setUserAttributeKey] = useState('');
   const [userAttributeValue, setUserAttributeValue] = useState('');
+  const [userData, setUserData] = useState('')
+  const [userEvent, setUserEvent] = useState('')
+  const [tag, setTag] = useState('')
   const [featureFlagName, setFeatureFlagName] = useState('');
   const [featureFlagVariant, setfeatureFlagVariant] = useState('');
   const [isUserStepEnabled, setIsUserStepEnabled] = useState<boolean>(true);
+  const [isSessionProfilerEnabled, setIsSessionProfilerEnabled] = useState<boolean>(true);
 
   const toast = useToast();
   const [userAttributesFormError, setUserAttributesFormError] = useState<any>({});
+  const [userDataFormError, setUserDataFormError] = useState<any>({})
+  const [userEventFormError, setUserEventFormError] = useState<any>({})
+  const [tagFormError, setTagFormError] = useState<any>({})
   const [featureFlagFormError, setFeatureFlagFormError] = useState<any>({});
   const { addItem } = useCallbackHandlers();
 
@@ -50,6 +58,30 @@ export const SettingsScreen: React.FC<NativeStackScreenProps<HomeStackParamList,
     setUserAttributesFormError(errors);
     return Object.keys(errors).length === 0;
   };
+  const validateUserDataForm = () => {
+    const errors: any = {};
+    if (userData.length === 0) {
+      errors.userDataValue = 'Value is required';
+    }
+    setUserDataFormError(errors);
+    return Object.keys(errors).length === 0;
+  };
+  const validateUserEventForm = () => {
+    const errors: any = {};
+    if (userData.length === 0) {
+      errors.userEventValue = 'Value is required';
+    }
+    setUserEventFormError(errors);
+    return Object.keys(errors).length === 0;
+  };
+  const validateTagForm = () => {
+    const errors: any = {};
+    if (userData.length === 0) {
+      errors.tagValue = 'Value is required';
+    }
+    setTagFormError(errors);
+    return Object.keys(errors).length === 0;
+  };
   const validateFeatureFlagForm = () => {
     const errors: any = {};
     if (featureFlagName.length === 0) {
@@ -89,6 +121,35 @@ export const SettingsScreen: React.FC<NativeStackScreenProps<HomeStackParamList,
       setUserAttributeValue('');
     }
   };
+
+  const saveUserData = () => {
+    if (validateUserDataForm()) {
+      Instabug.setUserData(userData);
+      toast.show({
+        description: 'User Data added successfully',
+      });
+      setUserData('')
+    }
+  };
+  const saveUserEvent = () => {
+    if (validateUserEventForm()) {
+      Instabug.logUserEvent(userEvent);
+      toast.show({
+        description: 'User Event added successfully',
+      });
+      setUserData('')
+    }
+  };
+  const saveTag = () => {
+    if (validateTagForm()) {
+      Instabug.appendTags([tag])
+      toast.show({
+        description: 'Tag added successfully',
+      });
+      setTag('')
+    }
+  };
+  
   const saveFeatureFlags = () => {
     if (validateFeatureFlagForm()) {
       Instabug.addFeatureFlag({
@@ -250,6 +311,31 @@ export const SettingsScreen: React.FC<NativeStackScreenProps<HomeStackParamList,
             Instabug.removeExperiments(['exp1', 'exp2']);
           }}
         />
+            
+            <ListTile
+          title="Session Profiler"
+          subtitle={isSessionProfilerEnabled ? 'Enabled' : 'Disabled'}
+          onPress={() => {
+            navigation.navigate('SessionProfiler', {
+              isEnabled: isSessionProfilerEnabled,
+              setIsEnabled: (enabled: boolean) => {
+                setIsSessionProfilerEnabled(enabled);
+                Instabug.setSessionProfilerEnabled(enabled);
+                navigation.goBack();
+              },
+            });
+          }}
+          testID="id_session_profiler"
+        />
+
+        <ListTile
+          title="Welcome message Beta"
+          onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.beta)}
+        />
+        <ListTile
+          title="Welcome message Live"
+          onPress={() => Instabug.showWelcomeMessage(WelcomeMessageMode.live)}
+        />
 
         <VerticalListTile title="User Identification">
           <VStack>
@@ -316,6 +402,60 @@ export const SettingsScreen: React.FC<NativeStackScreenProps<HomeStackParamList,
             </Button>
           </VStack>
         </VerticalListTile>
+        <VerticalListTile title="User Data">
+          <VStack>
+            <View style={styles.formContainer}>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="User data"
+                  onChangeText={(userData) => setUserData(userData)}
+                  value={userData}
+                  errorText={userDataFormError.userDataValue}
+                />
+              </View>
+            </View>
+
+            <Button mt="4" onPress={saveUserData}>
+              Save user data
+            </Button>
+          </VStack>
+        </VerticalListTile>
+        <VerticalListTile title="User Event">
+          <VStack>
+            <View style={styles.formContainer}>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="User event"
+                  onChangeText={(userEvent) => setUserEvent(userEvent)}
+                  value={userEvent}
+                  errorText={userEventFormError.userEventValue}
+                />
+              </View>
+            </View>
+
+            <Button mt="4" onPress={saveUserEvent}>
+              Save user event
+            </Button>
+          </VStack>
+        </VerticalListTile>
+        <VerticalListTile title="Tags">
+          <VStack>
+            <View style={styles.formContainer}>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="tag"
+                  onChangeText={(tag) => setTag(tag)}
+                  value={tag}
+                  errorText={tagFormError.tagValue}
+                />
+              </View>
+            </View>
+
+            <Button mt="4" onPress={saveTag}>
+              Save tag
+            </Button>
+          </VStack>
+        </VerticalListTile>
         <VerticalListTile title="Support varient">
           <VStack>
             <View style={styles.formContainer}>