From 374bfa0b13b395bbb805ec3a9f3bcdef680c9b04 Mon Sep 17 00:00:00 2001
From: Ahmed alaa <aalaa@instabug.com>
Date: Tue, 27 Feb 2024 00:04:16 +0200
Subject: [PATCH 1/2] feat(example): add survey with token action

---
 .../src/components/VerticalListTile.tsx       | 27 +++++++
 .../default/src/screens/SurveysScreen.tsx     | 71 ++++++++++++++++++-
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 examples/default/src/components/VerticalListTile.tsx

diff --git a/examples/default/src/components/VerticalListTile.tsx b/examples/default/src/components/VerticalListTile.tsx
new file mode 100644
index 0000000000..923a0b6e00
--- /dev/null
+++ b/examples/default/src/components/VerticalListTile.tsx
@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+
+import { Box, Pressable, Text, VStack } from 'native-base';
+
+interface ListTileProps extends PropsWithChildren {
+  title: string;
+  onPress?: () => void;
+}
+
+export const VerticalListTile: React.FC<ListTileProps> = ({ title, onPress, children }) => {
+  return (
+    <Pressable
+      onPress={onPress}
+      p="4"
+      rounded="2"
+      shadow="1"
+      borderBottomWidth="1"
+      borderColor="coolGray.300"
+      bg="coolGray.100"
+      _pressed={{ bg: 'coolGray.200' }}>
+      <VStack justifyContent="stretch">
+        <Text>{title}</Text>
+        <Box>{children}</Box>
+      </VStack>
+    </Pressable>
+  );
+};
diff --git a/examples/default/src/screens/SurveysScreen.tsx b/examples/default/src/screens/SurveysScreen.tsx
index 53dc94d2d1..5e9b4d8828 100644
--- a/examples/default/src/screens/SurveysScreen.tsx
+++ b/examples/default/src/screens/SurveysScreen.tsx
@@ -1,11 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Surveys } from 'instabug-reactnative';
 
 import { ListTile } from '../components/ListTile';
 import { Screen } from '../components/Screen';
+import { VerticalListTile } from '../components/VerticalListTile';
+import { Button, Input, Text, useToast, VStack } from 'native-base';
+import { StyleSheet, View } from 'react-native';
 
 export const SurveysScreen: React.FC = () => {
+  const [surveyToken, setSurveyToken] = useState('');
+  const toast = useToast();
+  const [userAttributesFormError, setUserAttributesFormError] = useState<any>({});
+
+  const validateUserAttributeForm = () => {
+    const errors: any = {};
+    if (surveyToken.length === 0) {
+      errors.surveyToken = 'Value is required';
+    }
+
+    setUserAttributesFormError(errors);
+    return Object.keys(errors).length === 0;
+  };
+  const styles = StyleSheet.create({
+    inputWrapper: {
+      padding: 4,
+      flex: 1,
+    },
+    errorText: {
+      color: '#ff0000',
+    },
+    formContainer: {
+      flexDirection: 'row',
+      alignItems: 'stretch',
+    },
+  });
   return (
     <Screen>
       <ListTile
@@ -16,6 +45,46 @@ export const SurveysScreen: React.FC = () => {
         title="Show Custom Survey"
         onPress={() => Surveys.showSurvey('6ZaEI4nVdjg19r5uekS5nw')}
       />
+
+      <VerticalListTile title="Survey token actions">
+        <VStack>
+          <View style={styles.formContainer}>
+            <View style={styles.inputWrapper}>
+              <Input
+                placeholder="Survey token"
+                onChangeText={(key) => setSurveyToken(key)}
+                defaultValue={surveyToken}
+              />
+              {userAttributesFormError.surveyToken ? (
+                <Text style={styles.errorText}>{userAttributesFormError.surveyToken}</Text>
+              ) : null}
+            </View>
+          </View>
+
+          <Button
+            mt="4"
+            onPress={() => {
+              if (validateUserAttributeForm()) {
+                Surveys.showSurvey(surveyToken);
+              }
+            }}>
+            Show survey
+          </Button>
+
+          <Button
+            mt="4"
+            onPress={async () => {
+              if (validateUserAttributeForm()) {
+                const hasResponded = await Surveys.hasRespondedToSurvey(surveyToken);
+                toast.show({
+                  description: hasResponded ? 'YES' : 'NO',
+                });
+              }
+            }}>
+            If User has responded survey
+          </Button>
+        </VStack>
+      </VerticalListTile>
     </Screen>
   );
 };

From f945ff524e4ac6e8987385f53c8f309a857ff3b4 Mon Sep 17 00:00:00 2001
From: Ahmed alaa <aalaa@instabug.com>
Date: Wed, 28 Feb 2024 12:37:53 +0200
Subject: [PATCH 2/2] refactor: export onPress functions to methods

---
 .../default/src/screens/SurveysScreen.tsx     | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/examples/default/src/screens/SurveysScreen.tsx b/examples/default/src/screens/SurveysScreen.tsx
index 5e9b4d8828..b186992cba 100644
--- a/examples/default/src/screens/SurveysScreen.tsx
+++ b/examples/default/src/screens/SurveysScreen.tsx
@@ -35,6 +35,22 @@ export const SurveysScreen: React.FC = () => {
       alignItems: 'stretch',
     },
   });
+
+  const checkIfUserHasResponded = async () => {
+    if (validateUserAttributeForm()) {
+      const hasResponded = await Surveys.hasRespondedToSurvey(surveyToken);
+      toast.show({
+        description: hasResponded ? 'YES' : 'NO',
+      });
+    }
+  };
+
+  const showSurveyWithToken = () => {
+    if (validateUserAttributeForm()) {
+      Surveys.showSurvey(surveyToken);
+    }
+  };
+
   return (
     <Screen>
       <ListTile
@@ -61,26 +77,11 @@ export const SurveysScreen: React.FC = () => {
             </View>
           </View>
 
-          <Button
-            mt="4"
-            onPress={() => {
-              if (validateUserAttributeForm()) {
-                Surveys.showSurvey(surveyToken);
-              }
-            }}>
+          <Button mt="4" onPress={showSurveyWithToken}>
             Show survey
           </Button>
 
-          <Button
-            mt="4"
-            onPress={async () => {
-              if (validateUserAttributeForm()) {
-                const hasResponded = await Surveys.hasRespondedToSurvey(surveyToken);
-                toast.show({
-                  description: hasResponded ? 'YES' : 'NO',
-                });
-              }
-            }}>
+          <Button mt="4" onPress={checkIfUserHasResponded}>
             If User has responded survey
           </Button>
         </VStack>