feat(example): survey with token actions (#1157)

* feat(example): add survey with token action

* refactor: export onPress functions to methods

Author: ahmedAlaaInstabug

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>
+  );
+};

examples/default/src/screens/SurveysScreen.tsx

@@ -1,11 +1,56 @@
-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',
+    },
+  });
+
+  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
@@ -16,6 +61,31 @@ 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={showSurveyWithToken}>
+            Show survey
+          </Button>
+
+          <Button mt="4" onPress={checkIfUserHasResponded}>
+            If User has responded survey
+          </Button>
+        </VStack>
+      </VerticalListTile>
     </Screen>
   );
 };