Add intercom methods to test Expo sandbox app (#190)

* added intercom fn * added more intercom methofs * remove keys
intercom · Apr 25, 2024 · a55190c · a55190c
1 parent 24a103a
commit a55190c
Show file tree

Hide file tree

Showing 3 changed files with 285 additions and 32 deletions.
diff --git a/sandboxes/IntercomExpo/App.js b/sandboxes/IntercomExpo/App.js
@@ -1,12 +1,11 @@
-import React, { useEffect } from 'react';
-import { StatusBar } from 'expo-status-bar';
+import React, { useEffect, useState, useCallback } from 'react';
 import {
-  StyleSheet,
   AppState,
   Text,
   TextInput,
   TouchableOpacity,
   View,
+  ScrollView,
 } from 'react-native';
 import Intercom, { Visibility } from '@intercom/intercom-react-native';
 import { useIntercom } from './useIntercom';
@@ -27,43 +26,200 @@ export default function App() {
     })();
   }, []);
 
+  const [conversationId, setConversationId] = useState(null);
+  const [articleId, setArticleId] = useState(null);
+  const [carouselId, setCarouselId] = useState(null);
+  const [surveyId, setSurveyId] = useState(null);
+  const [collectionId, setCollectionId] = useState(null);
+  const [launcherVisibility, setLauncherVisibility] = useState(false);
+
+  const showConversation = useCallback(() => {
+    openConversation(conversationId);
+  }, [conversationId]);
+
+  const showCarousel = useCallback(() => {
+    openCarousel(carouselId);
+  });
+
+  const showArticle = useCallback(() => {
+    openArticle(articleId);
+  }, [articleId]);
+
+  const showSurvey = useCallback(() => {
+    openSurvey(surveyId);
+  }, [articleId]);
+
+  const showHelpCenterCollection = useCallback(() => {
+    openHelpCenterCollection(collectionId);
+  }, [articleId]);
+
+  const toggleLauncherVisibility = useCallback(() => {
+    Intercom.setLauncherVisibility(
+      launcherVisibility ? Visibility.GONE : Visibility.VISIBLE
+    ).then(() => setLauncherVisibility((v) => !v));
+  });
+
   const {
     handleLoginIdentifiedUser,
     handleLoginUnidentifiedUser,
     handleLogout,
     setUserIdentifier,
-    isLoggedIn,
+    openHelpCenter,
+    openMessages,
+    openTicketsSpace,
+    openConversation,
+    openHelpCenterCollection,
+    openArticle,
+    openCarousel,
+    openSurvey,
+    openMessageComposer,
   } = useIntercom();
 
   return (
     <View style={styles.screenWrapper}>
-      <Text style={styles.title}>Push Notifications Sandbox</Text>
-      <View style={styles.wrapper}>
-        {!isLoggedIn ? (
+      <ScrollView>
+        <Text style={styles.title}>Push Notifications Sandbox</Text>
+        <View style={styles.wrapper}>
           <>
-            <TextInput style={styles.input} onChangeText={setUserIdentifier} />
+            <TextInput
+              style={styles.emailInput}
+              onChangeText={setUserIdentifier}
+              placeholder="Enter email"
+            />
             <TouchableOpacity
               style={styles.button}
               onPress={handleLoginIdentifiedUser}
             >
-              <Text style={styles.buttonText}>Login Identified User</Text>
+              <Text style={styles.buttonText}>REGISTER IDENTIFIED</Text>
             </TouchableOpacity>
+            <View style={styles.rowWrapper}>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={handleLoginUnidentifiedUser}
+              >
+                <Text style={styles.buttonText}>REGISTER UNIDENTIFIED</Text>
+              </TouchableOpacity>
 
-            <View style={styles.divider} />
+              <TouchableOpacity style={styles.button} onPress={handleLogout}>
+                <Text style={styles.buttonText}>RESET</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.rowWrapper}>
+              <TouchableOpacity style={styles.button} onPress={openMessages}>
+                <Text style={styles.buttonText}>OPEN MESSAGES</Text>
+              </TouchableOpacity>
 
-            <TouchableOpacity
-              style={styles.button}
-              onPress={handleLoginUnidentifiedUser}
-            >
-              <Text style={styles.buttonText}>Login Unidentified User</Text>
-            </TouchableOpacity>
+              <TouchableOpacity style={styles.button} onPress={openHelpCenter}>
+                <Text style={styles.buttonText}>HELP CENTER</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.rowWrapper}>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={openTicketsSpace}
+              >
+                <Text style={styles.buttonText}>TICKETS</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.button}
+                onPress={openTicketsSpace}
+              >
+                <Text style={styles.buttonText}>MESSENGER</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.rowWrapper}>
+              <TextInput
+                style={styles.input}
+                onChangeText={setCollectionId}
+                placeholder="Collection Id"
+              />
+              <TouchableOpacity
+                style={styles.button}
+                onPress={showHelpCenterCollection}
+                disabled={!collectionId}
+              >
+                <Text style={styles.buttonText}>HELP CENTER COLLECTION</Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.rowWrapper}>
+              <TextInput
+                style={styles.input}
+                onChangeText={setConversationId}
+                placeholder="Conversation Id..."
+              />
+              <TouchableOpacity
+                style={styles.button}
+                onPress={showConversation}
+                disabled={!conversationId}
+              >
+                <Text style={styles.buttonText}>SHOW CONVERSATION</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.rowWrapper}>
+              <TextInput
+                style={styles.input}
+                onChangeText={setArticleId}
+                placeholder="Article Id..."
+              />
+              <TouchableOpacity
+                style={styles.button}
+                onPress={showArticle}
+                disabled={!articleId}
+              >
+                <Text style={styles.buttonText}>SHOW ARTICLE</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.rowWrapper}>
+              <TextInput
+                style={styles.input}
+                onChangeText={setCarouselId}
+                placeholder="Carousel Id..."
+              />
+              <TouchableOpacity
+                style={styles.button}
+                onPress={showCarousel}
+                disabled={!carouselId}
+              >
+                <Text style={styles.buttonText}>SHOW CAROUSEL</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.rowWrapper}>
+              <TextInput
+                style={styles.input}
+                onChangeText={setSurveyId}
+                placeholder="Survey Id..."
+              />
+              <TouchableOpacity
+                style={styles.button}
+                onPress={showSurvey}
+                disabled={!surveyId}
+              >
+                <Text style={styles.buttonText}>SHOW SURVEY</Text>
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.rowWrapper}>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={openMessageComposer}
+              >
+                <Text style={styles.buttonText}>SHOW COMPOSER</Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.button}
+                onPress={toggleLauncherVisibility}
+              >
+                <Text style={styles.buttonText}>TOGGLE MESSENGER</Text>
+              </TouchableOpacity>
+            </View>
           </>
-        ) : (
-          <TouchableOpacity style={styles.button} onPress={handleLogout}>
-            <Text style={styles.buttonText}>Logout</Text>
-          </TouchableOpacity>
-        )}
-      </View>
+        </View>
+      </ScrollView>
     </View>
   );
 }
diff --git a/sandboxes/IntercomExpo/App.styles.js b/sandboxes/IntercomExpo/App.styles.js
@@ -2,31 +2,50 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   screenWrapper: {
-    flex: 1,
+    alignItems: 'center',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  rowWrapper: {
+    flexDirection: 'row',
+    marginTop: 10,
+    alignContent: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
   title: {
-    position: 'absolute',
-    top: '25%',
     fontWeight: 'bold',
-    fontSize: 20,
+    fontSize: 16,
+    marginBottom: 10,
   },
   wrapper: {
-    width: '50%',
+    width: '100%',
   },
-  input: {
+  emailInput: {
     borderWidth: 1,
     borderColor: 'rgba(0,0,80,0.2)',
     backgroundColor: '#f3f8ff',
-    paddingVertical: 10,
+    paddingVertical: 5,
+    paddingLeft: 5,
     fontSize: 18,
     marginBottom: 10,
+    maxWidth: '100%',
+    width: '100%',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,80,0.2)',
+    paddingVertical: 5,
+    paddingLeft: 5,
+    fontSize: 15,
+    width: '45%',
   },
   button: {
-    backgroundColor: '#7284c5',
-    paddingVertical: 13,
+    backgroundColor: '#be2ed6',
+    padding: 10,
     alignItems: 'center',
+    borderRadius: 5,
+    margin: 5,
   },
   buttonText: {
     color: '#fff',
@@ -36,4 +55,17 @@ export const styles = StyleSheet.create({
     borderWidth: 0.5,
     borderColor: '#5757ca',
   },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    width: '50%',
+  },
 });
diff --git a/sandboxes/IntercomExpo/useIntercom.js b/sandboxes/IntercomExpo/useIntercom.js
@@ -1,4 +1,7 @@
-import Intercom from '@intercom/intercom-react-native';
+import Intercom, {
+  Space,
+  IntercomContent,
+} from '@intercom/intercom-react-native';
 import { useMMKVStorage } from 'react-native-mmkv-storage';
 import { storage } from './App.utils';
 
@@ -24,11 +27,73 @@ export function useIntercom() {
     setIsLoggedIn(false);
   };
 
+  const openMessages = () => {
+    Intercom.presentSpace(Space.messages);
+  };
+
+  const openHelpCenter = () => {
+    Intercom.presentSpace(Space.helpCenter);
+  };
+
+  const openTicketsSpace = () => {
+    Intercom.presentSpace(Space.tickets);
+  };
+
+  const openMessenger = () => {
+    Intercom.present();
+  };
+
+  const openHelpCenterCollection = (collectionIds) => {
+    let helpCenterCollectionsContent =
+      IntercomContent.helpCenterCollectionsWithIds(collectionIds);
+    Intercom.presentContent(helpCenterCollectionsContent);
+  };
+
+  const openConversation = (conversationId) => {
+    let conversationContent =
+      IntercomContent.conversationWithConversationId(conversationId);
+    Intercom.presentContent(conversationContent);
+  };
+
+  const openArticle = (articleId) => {
+    let articleContent = IntercomContent.articleWithArticleId(articleId);
+    Intercom.presentContent(articleContent);
+  };
+
+  const openCarousel = (carouselId) => {
+    let carouselContent = IntercomContent.carouselWithCarouselId(carouselId);
+    Intercom.presentContent(carouselContent);
+  };
+
+  const openSurvey = (surveyId) => {
+    let surveyContent = IntercomContent.surveyWithSurveyId(surveyId);
+    Intercom.presentContent(surveyContent);
+  };
+
+  const toggleLauncher = (visibility) => {
+    Intercom.setLauncherVisibility(visibility);
+  };
+
+  const openMessageComposer = () => {
+    Intercom.presentMessageComposer('initial message');
+  };
+
   return {
     setUserIdentifier,
     isLoggedIn,
     handleLoginIdentifiedUser,
     handleLoginUnidentifiedUser,
     handleLogout,
+    openMessages,
+    openHelpCenter,
+    openTicketsSpace,
+    openMessenger,
+    openHelpCenterCollection,
+    openConversation,
+    openArticle,
+    openCarousel,
+    openSurvey,
+    toggleLauncher,
+    openMessageComposer,
   };
 }