Skip to content

Commit a55190c

Browse files
uddishuddish
authored
Add intercom methods to test Expo sandbox app (#190)
* added intercom fn * added more intercom methofs * remove keys
1 parent 24a103a commit a55190c

File tree

3 files changed

+285
-32
lines changed

3 files changed

+285
-32
lines changed

‎sandboxes/IntercomExpo/App.js‎

Lines changed: 178 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, { useEffect } from 'react';
2-
import { StatusBar } from 'expo-status-bar';
1+
import React, { useEffect, useState, useCallback } from 'react';
32
import {
4-
StyleSheet,
53
AppState,
64
Text,
75
TextInput,
86
TouchableOpacity,
97
View,
8+
ScrollView,
109
} from 'react-native';
1110
import Intercom, { Visibility } from '@intercom/intercom-react-native';
1211
import { useIntercom } from './useIntercom';
@@ -27,43 +26,200 @@ export default function App() {
2726
})();
2827
}, []);
2928

29+
const [conversationId, setConversationId] = useState(null);
30+
const [articleId, setArticleId] = useState(null);
31+
const [carouselId, setCarouselId] = useState(null);
32+
const [surveyId, setSurveyId] = useState(null);
33+
const [collectionId, setCollectionId] = useState(null);
34+
const [launcherVisibility, setLauncherVisibility] = useState(false);
35+
36+
const showConversation = useCallback(() => {
37+
openConversation(conversationId);
38+
}, [conversationId]);
39+
40+
const showCarousel = useCallback(() => {
41+
openCarousel(carouselId);
42+
});
43+
44+
const showArticle = useCallback(() => {
45+
openArticle(articleId);
46+
}, [articleId]);
47+
48+
const showSurvey = useCallback(() => {
49+
openSurvey(surveyId);
50+
}, [articleId]);
51+
52+
const showHelpCenterCollection = useCallback(() => {
53+
openHelpCenterCollection(collectionId);
54+
}, [articleId]);
55+
56+
const toggleLauncherVisibility = useCallback(() => {
57+
Intercom.setLauncherVisibility(
58+
launcherVisibility ? Visibility.GONE : Visibility.VISIBLE
59+
).then(() => setLauncherVisibility((v) => !v));
60+
});
61+
3062
const {
3163
handleLoginIdentifiedUser,
3264
handleLoginUnidentifiedUser,
3365
handleLogout,
3466
setUserIdentifier,
35-
isLoggedIn,
67+
openHelpCenter,
68+
openMessages,
69+
openTicketsSpace,
70+
openConversation,
71+
openHelpCenterCollection,
72+
openArticle,
73+
openCarousel,
74+
openSurvey,
75+
openMessageComposer,
3676
} = useIntercom();
3777

3878
return (
3979
<View style={styles.screenWrapper}>
40-
<Text style={styles.title}>Push Notifications Sandbox</Text>
41-
<View style={styles.wrapper}>
42-
{!isLoggedIn ? (
80+
<ScrollView>
81+
<Text style={styles.title}>Push Notifications Sandbox</Text>
82+
<View style={styles.wrapper}>
4383
<>
44-
<TextInput style={styles.input} onChangeText={setUserIdentifier} />
84+
<TextInput
85+
style={styles.emailInput}
86+
onChangeText={setUserIdentifier}
87+
placeholder="Enter email"
88+
/>
4589
<TouchableOpacity
4690
style={styles.button}
4791
onPress={handleLoginIdentifiedUser}
4892
>
49-
<Text style={styles.buttonText}>Login Identified User</Text>
93+
<Text style={styles.buttonText}>REGISTER IDENTIFIED</Text>
5094
</TouchableOpacity>
95+
<View style={styles.rowWrapper}>
96+
<TouchableOpacity
97+
style={styles.button}
98+
onPress={handleLoginUnidentifiedUser}
99+
>
100+
<Text style={styles.buttonText}>REGISTER UNIDENTIFIED</Text>
101+
</TouchableOpacity>
51102

52-
<View style={styles.divider} />
103+
<TouchableOpacity style={styles.button} onPress={handleLogout}>
104+
<Text style={styles.buttonText}>RESET</Text>
105+
</TouchableOpacity>
106+
</View>
107+
<View style={styles.rowWrapper}>
108+
<TouchableOpacity style={styles.button} onPress={openMessages}>
109+
<Text style={styles.buttonText}>OPEN MESSAGES</Text>
110+
</TouchableOpacity>
53111

54-
<TouchableOpacity
55-
style={styles.button}
56-
onPress={handleLoginUnidentifiedUser}
57-
>
58-
<Text style={styles.buttonText}>Login Unidentified User</Text>
59-
</TouchableOpacity>
112+
<TouchableOpacity style={styles.button} onPress={openHelpCenter}>
113+
<Text style={styles.buttonText}>HELP CENTER</Text>
114+
</TouchableOpacity>
115+
</View>
116+
<View style={styles.rowWrapper}>
117+
<TouchableOpacity
118+
style={styles.button}
119+
onPress={openTicketsSpace}
120+
>
121+
<Text style={styles.buttonText}>TICKETS</Text>
122+
</TouchableOpacity>
123+
124+
<TouchableOpacity
125+
style={styles.button}
126+
onPress={openTicketsSpace}
127+
>
128+
<Text style={styles.buttonText}>MESSENGER</Text>
129+
</TouchableOpacity>
130+
</View>
131+
<View style={styles.rowWrapper}>
132+
<TextInput
133+
style={styles.input}
134+
onChangeText={setCollectionId}
135+
placeholder="Collection Id"
136+
/>
137+
<TouchableOpacity
138+
style={styles.button}
139+
onPress={showHelpCenterCollection}
140+
disabled={!collectionId}
141+
>
142+
<Text style={styles.buttonText}>HELP CENTER COLLECTION</Text>
143+
</TouchableOpacity>
144+
</View>
145+
<View style={styles.rowWrapper}>
146+
<TextInput
147+
style={styles.input}
148+
onChangeText={setConversationId}
149+
placeholder="Conversation Id..."
150+
/>
151+
<TouchableOpacity
152+
style={styles.button}
153+
onPress={showConversation}
154+
disabled={!conversationId}
155+
>
156+
<Text style={styles.buttonText}>SHOW CONVERSATION</Text>
157+
</TouchableOpacity>
158+
</View>
159+
160+
<View style={styles.rowWrapper}>
161+
<TextInput
162+
style={styles.input}
163+
onChangeText={setArticleId}
164+
placeholder="Article Id..."
165+
/>
166+
<TouchableOpacity
167+
style={styles.button}
168+
onPress={showArticle}
169+
disabled={!articleId}
170+
>
171+
<Text style={styles.buttonText}>SHOW ARTICLE</Text>
172+
</TouchableOpacity>
173+
</View>
174+
175+
<View style={styles.rowWrapper}>
176+
<TextInput
177+
style={styles.input}
178+
onChangeText={setCarouselId}
179+
placeholder="Carousel Id..."
180+
/>
181+
<TouchableOpacity
182+
style={styles.button}
183+
onPress={showCarousel}
184+
disabled={!carouselId}
185+
>
186+
<Text style={styles.buttonText}>SHOW CAROUSEL</Text>
187+
</TouchableOpacity>
188+
</View>
189+
190+
<View style={styles.rowWrapper}>
191+
<TextInput
192+
style={styles.input}
193+
onChangeText={setSurveyId}
194+
placeholder="Survey Id..."
195+
/>
196+
<TouchableOpacity
197+
style={styles.button}
198+
onPress={showSurvey}
199+
disabled={!surveyId}
200+
>
201+
<Text style={styles.buttonText}>SHOW SURVEY</Text>
202+
</TouchableOpacity>
203+
</View>
204+
205+
<View style={styles.rowWrapper}>
206+
<TouchableOpacity
207+
style={styles.button}
208+
onPress={openMessageComposer}
209+
>
210+
<Text style={styles.buttonText}>SHOW COMPOSER</Text>
211+
</TouchableOpacity>
212+
213+
<TouchableOpacity
214+
style={styles.button}
215+
onPress={toggleLauncherVisibility}
216+
>
217+
<Text style={styles.buttonText}>TOGGLE MESSENGER</Text>
218+
</TouchableOpacity>
219+
</View>
60220
</>
61-
) : (
62-
<TouchableOpacity style={styles.button} onPress={handleLogout}>
63-
<Text style={styles.buttonText}>Logout</Text>
64-
</TouchableOpacity>
65-
)}
66-
</View>
221+
</View>
222+
</ScrollView>
67223
</View>
68224
);
69225
}

‎sandboxes/IntercomExpo/App.styles.js‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,50 @@ import { StyleSheet } from 'react-native';
22

33
export const styles = StyleSheet.create({
44
screenWrapper: {
5-
flex: 1,
5+
alignItems: 'center',
6+
paddingLeft: 10,
7+
paddingRight: 10,
8+
},
9+
rowWrapper: {
10+
flexDirection: 'row',
11+
marginTop: 10,
12+
alignContent: 'center',
613
alignItems: 'center',
714
justifyContent: 'center',
815
},
916
title: {
10-
position: 'absolute',
11-
top: '25%',
1217
fontWeight: 'bold',
13-
fontSize: 20,
18+
fontSize: 16,
19+
marginBottom: 10,
1420
},
1521
wrapper: {
16-
width: '50%',
22+
width: '100%',
1723
},
18-
input: {
24+
emailInput: {
1925
borderWidth: 1,
2026
borderColor: 'rgba(0,0,80,0.2)',
2127
backgroundColor: '#f3f8ff',
22-
paddingVertical: 10,
28+
paddingVertical: 5,
29+
paddingLeft: 5,
2330
fontSize: 18,
2431
marginBottom: 10,
32+
maxWidth: '100%',
33+
width: '100%',
34+
},
35+
input: {
36+
borderWidth: 1,
37+
borderColor: 'rgba(0,0,80,0.2)',
38+
paddingVertical: 5,
39+
paddingLeft: 5,
40+
fontSize: 15,
41+
width: '45%',
2542
},
2643
button: {
27-
backgroundColor: '#7284c5',
28-
paddingVertical: 13,
44+
backgroundColor: '#be2ed6',
45+
padding: 10,
2946
alignItems: 'center',
47+
borderRadius: 5,
48+
margin: 5,
3049
},
3150
buttonText: {
3251
color: '#fff',
@@ -36,4 +55,17 @@ export const styles = StyleSheet.create({
3655
borderWidth: 0.5,
3756
borderColor: '#5757ca',
3857
},
58+
modalContainer: {
59+
flex: 1,
60+
justifyContent: 'center',
61+
alignItems: 'center',
62+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
63+
},
64+
modalContent: {
65+
backgroundColor: 'white',
66+
padding: 20,
67+
borderRadius: 10,
68+
alignItems: 'center',
69+
width: '50%',
70+
},
3971
});

‎sandboxes/IntercomExpo/useIntercom.js‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import Intercom from '@intercom/intercom-react-native';
1+
import Intercom, {
2+
Space,
3+
IntercomContent,
4+
} from '@intercom/intercom-react-native';
25
import { useMMKVStorage } from 'react-native-mmkv-storage';
36
import { storage } from './App.utils';
47

@@ -24,11 +27,73 @@ export function useIntercom() {
2427
setIsLoggedIn(false);
2528
};
2629

30+
const openMessages = () => {
31+
Intercom.presentSpace(Space.messages);
32+
};
33+
34+
const openHelpCenter = () => {
35+
Intercom.presentSpace(Space.helpCenter);
36+
};
37+
38+
const openTicketsSpace = () => {
39+
Intercom.presentSpace(Space.tickets);
40+
};
41+
42+
const openMessenger = () => {
43+
Intercom.present();
44+
};
45+
46+
const openHelpCenterCollection = (collectionIds) => {
47+
let helpCenterCollectionsContent =
48+
IntercomContent.helpCenterCollectionsWithIds(collectionIds);
49+
Intercom.presentContent(helpCenterCollectionsContent);
50+
};
51+
52+
const openConversation = (conversationId) => {
53+
let conversationContent =
54+
IntercomContent.conversationWithConversationId(conversationId);
55+
Intercom.presentContent(conversationContent);
56+
};
57+
58+
const openArticle = (articleId) => {
59+
let articleContent = IntercomContent.articleWithArticleId(articleId);
60+
Intercom.presentContent(articleContent);
61+
};
62+
63+
const openCarousel = (carouselId) => {
64+
let carouselContent = IntercomContent.carouselWithCarouselId(carouselId);
65+
Intercom.presentContent(carouselContent);
66+
};
67+
68+
const openSurvey = (surveyId) => {
69+
let surveyContent = IntercomContent.surveyWithSurveyId(surveyId);
70+
Intercom.presentContent(surveyContent);
71+
};
72+
73+
const toggleLauncher = (visibility) => {
74+
Intercom.setLauncherVisibility(visibility);
75+
};
76+
77+
const openMessageComposer = () => {
78+
Intercom.presentMessageComposer('initial message');
79+
};
80+
2781
return {
2882
setUserIdentifier,
2983
isLoggedIn,
3084
handleLoginIdentifiedUser,
3185
handleLoginUnidentifiedUser,
3286
handleLogout,
87+
openMessages,
88+
openHelpCenter,
89+
openTicketsSpace,
90+
openMessenger,
91+
openHelpCenterCollection,
92+
openConversation,
93+
openArticle,
94+
openCarousel,
95+
openSurvey,
96+
toggleLauncher,
97+
openMessageComposer,
3398
};
3499
}

0 commit comments

Comments
 (0)